li en ligne avec puce

Bonjour a tous,

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

Code:

---

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:

---

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 ?

Salut,

Est à affecter à ul et non li.

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

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.

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

a l'intérieur de quoi ?

Je ne comprend pas.

Code:

---

1 2 3

li { list-style-position: inside; }

---

Une source tirée d'un autre forum:

Citation:

---

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.

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