Aller au contenu

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


Bozo

Sujets conseillés

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é par Bozo
Lien vers le commentaire
Partager sur d’autres sites

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>

@++

Lien vers le commentaire
Partager sur d’autres sites

Non le display: inline ; suprimera les puces.

<{POST_SNAPBACK}>

Ah ?

Ben alors tu mets ça :

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

Amicalement,

Loupilo

Lien vers le commentaire
Partager sur d’autres sites

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

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".

Lien vers le commentaire
Partager sur d’autres sites

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 :blush:

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

Amicalement,

Loupilo

Lien vers le commentaire
Partager sur d’autres sites

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 ?

:blush: bon, d'accord, je sors ...

Modifié par Bug
Lien vers le commentaire
Partager sur d’autres sites

même la mienne ?

:blush: bon, d'accord, je sors ...

<{POST_SNAPBACK}>

Je l'avais pas vu :lol:

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

A+

Loupilo ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...