Discussion :

[malbaladejo]

Bonjour a tous,

Je voudrais afficher une liste avec 3 éléments par ligne.
J'utilise le code suivant :
css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#soins ul
{
width:100%;
}
#soins li
{
display:inline;
list-style-type:disc;
width:33%;
}

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="soins">
<ul>
<li>toto</li>
<li>toto</li>
<li>toto</li>
<li>toto</li>
<li>toto</li>
<li>toto</li>
<li>toto</li>
</ul>
</div>

Tout se passe très bien, j'ai bien 3 éléments par ligne mais les puces n'apparaissent pas.

Vous savez pourquoi ?

[franculo_caoulene]

Salut,

Est à affecter à ul et non li.

[SpaceFrog]

si tu mets rien du tout il te colle pas des petits ronds par defaut ?

[malbaladejo]

J'ai mis le list-type sur ul mais ça ne change rien.
C'est peut etre du au fait que je fixe des largeurs (width:33%).
La puce n'a peut être pas la place de s'afficher.

[SpaceFrog]

essaye de mettre la puce à l'intérieur ... ?

[malbaladejo]

a l'intérieur de quoi ?

Je ne comprend pas.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
li {
	list-style-position: inside;
}

[franculo_caoulene]

Une source tirée d'un autre forum:

Appliquer un display:inline aux éléments ul n'a aucun effet sur les éléments li, qui continuent à générer des boîtes blocs, et ne peuvent pas s'aligner horizontalement.

Appliquer un display:inline aux éléments li annule leur valeur de display par défaut, list-item, qui permet justement la génération de la boîte de "puce" (boîte de marqueur).

Un alignement horizontal des li à l'aide de float pose un problème similaire: le display prend la valeur block et non plus list-item, bien que les navigateurs aient sur ce point précis des comportements divergents.

Autrement-dit, pour obtenir des puces sur des éléments li alignés horizontalement, il faut générer ces puces en background CSS, ou les inclure directement comme images <img src="..." alt="" />.

Tellement bien dit que j'ai pas voulu me l'approprier.

[malbaladejo]

merci pour cette réponse très précise.
C'est bon à savoir.