[Résolu] Items de liste sur une même ligne

[Bozo]

Bonjour,

Je souhaiterais savoir s'il est possible de faire afficher les éléments d'une liste les uns à la suite des autres sur une même ligne, tout en conservant l'affichage des puces ?

Exemple :

item1 * item2 * item3 * item4 * item5

Merci d'avance.

Modifié 2 Octobre 2004 par Bozo

[Loupilo]

Oui, si tu spécifies li {display:inline;}.

Pour plus d'informations, tu peux lire Boîtes bloc, boîtes en ligne et propriété display, sur OpenWeb.

Amicalement,

Loupilo

[ElMoustiko]

Tu les fait flotter et donnant les marges adéquates et zou c'est réglé.

/* CSS */
li
{
   float: left;
   margin: 0 15px;
}

<!-- html -->
<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
</ul>

@++

[ElMoustiko]

Non le display: inline ; suprimera les puces.

[Loupilo]

Non le display: inline ; suprimera les puces.

<{POST_SNAPBACK}>

Ah ?

Ben alors tu mets ça :

li {
display:inline;
list-style-type:disc;
}

Amicalement,

Loupilo

[ElMoustiko]

Ca marche ton truc loupilo ?

Il me semble pas, mais si ca marche, c'est bon a savoir.

[LaurentDenis]

Non, ça ne marche pas : ce n'est pas la propriété list-style-type qui sert à générer une puce (elle ne fait qu'en spécifier le type).

Les puces ne peuvent être générées que grâce à la propriété display:list-item. C'est la valeur par défaut pour l'élément <li>. Et en appliquant un display:inline au <li>, on supprime du coup la génération des puces.

Bien-sûr, on peut retomber sur ses pattes à partir du display:inline grâce à un simple li:before avec un content: "•". Mais pas dans IE

[Bug]

et en faisant un tout bête

<!-- html -->
<ul>
  <li> item1</li>
  <li> item2</li>
  <li> item3</li>
  <li> item4</li>
</ul>

non ?

[LaurentDenis]

La puce placée dans le contenu :

- apparaîtra en double dans un navigateur graphique avec CSS désactivée (page enregistrée sans sa CSS, utilisateur désactivant la CSS parce que celle-ci lui pose un problème...)

- apparaîtra également en double du caractère de liste (* souvent) dans un navigateur texte

- sera lue "bullet..." ou "boulet..." dans un navigateur vocal (et quelque-chose d'approchant dans un lecteur d'écran).

- ne sera pas modifiable facilement en cas de changement du design si cette technique est appliquée à un grand nombre de pages statiques

- etc

Bref, tous les défauts habituels d'un élément de présentation géré directement dans le HTML, que permet de contourner la propriété CSS "content".

[ElMoustiko]

Sinon il est possible en utilisant display: inline ; d'attribuer une image de fond aux li en leur donnant un padding adéquat. Cette solution fonctionnera partout. Voir http://openweb.eu.org/articles/puces_images/ pour plus d'explications.

[Loupilo]

Ca marche ton truc loupilo ?

Il me semble pas, mais si ca marche, c'est bon a savoir.

<{POST_SNAPBACK}>

Non, ça ne marche pas : ce n'est pas la propriété list-style-type qui sert à générer une puce (elle ne fait qu'en spécifier le type).

<{POST_SNAPBACK}>

Ah ben désolé alors

Par contre, toutes les autres solutions données marchent...

Amicalement,

Loupilo

[Bug]

Bref, tous les défauts habituels d'un élément de présentation géré directement dans le HTML, que permet de contourner la propriété CSS "content"

Par contre, toutes les autres solutions données marchent...

même la mienne ?

bon, d'accord, je sors ...

Modifié 2 Octobre 2004 par Bug

[Loupilo]

même la mienne ?

bon, d'accord, je sors ...

<{POST_SNAPBACK}>

Je l'avais pas vu

Ben oui, elle marche... Elle est vraiment déconseillée mais aux premiers abords ça marche...

A+

Loupilo