Liste ul tout sur la même ligne [résolu]

Bonjour,
J'aimerais savoir si c'est possible d'avoir une bête liste ul, mais que les différents éléments soient présentés tout sur la même ligne.

Par exemple :

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Mais que ça donne visuellement :
• Item 1 • Item 2 • Item 3 •

J'espère avoir été clair.
Merci.
Modifié par QuentinC (14 Oct 2005 - 22:54)

Bonjour QuentinC,

Oui c'est possible avec la propriété css display:

display:inline

Ça n'a pas l'air de marcher... c'est parce qu'il y a des liens dans mes li ?

C'est bien ça qu'il faut faire ?

CSS :
.inline { display:inline; }

XHTML :
<ul class="inline">
...
</ul>

Pas tout à fait, il faut appliquer le style inline aux éléments li (dans la mesure où tu souhaitais aligner les li).

Tu pourrais très bien appliquer le style inline aux éléments ul si tu voulais aligner des éléments ul.

Alors je dois mettre ça pour le CSS ?

.inline li { display:inline; }

Mais question : est-ce que .inline li { ... } va marcher même si je ne définis nulle part de .inline { ... } ?

QuentinC a écrit :
Ça n'a pas l'air de marcher... c'est parce qu'il y a des liens dans mes li ?

C'est bien ça qu'il faut faire ?

CSS :
.inline { display:inline; }

XHTML :
<ul class="inline">
...
</ul>

dans ce cas c'est :

CSS :
.inline li{ display:inline; }

Tous les éléments li enfants de l'ul de class=inline sont affectés

class="inline" avec les quotes, évidemment.

Tiens, bonjour Mk de phpdeb.

Je vais tester tout ça, merci.

Coucou,

c'estpas tres compliqué à faire. Si tu n'as pas d'autre liste sur ton site tu fais comme ceci

code CSS :

ul li {display:inline;}

et voila. Bien sur, comme ca, TOUS tes li seront alignés. Si tu veux que ca ne concerne que ce menu, donne lui un id et aplique le display dessus :

code HTML

<ul id="cemenu">
                            <li> Lien 1 </li>
                           <li> lien 2 </li>
                             <li>lien 3 </li>
                         </ul>

et le CSS :

ul#cemenu li {display:inline;}

Voilou


Ooops;; effectivement c'est un # et pas un '.'
Modifié par Kwic (15 Oct 2005 - 23:55)

Pour un id c'est pas plutôt : ul#cemenu li ?
Mais bon, j'ai opté pour une classe et ça marche.

Merci à tous !