Comment styliser la liste UL sur une seule ligne

126

Je veux rendre cette liste en une seule ligne.

Élément de liste 1
Élément de liste 2

Doit être affiché comme

* Élément de liste2 * Élément de liste2

Quel style CSS utiliser?

css

— RD
source

Je sais que cette question n'est pas spécifique au bootstrap, mais j'ai trouvé que les miniatures de bootstrap étaient très utiles pour la liste horizontale de texte, d'images, de vidéos, etc.

— Anupam

184

ul li{
  display: inline;
}

Pour plus d'informations, consultez les options de liste de base et une liste horizontale de base sur listamatic. (merci à Daniel Straight ci-dessous pour les liens).

De plus, comme indiqué dans les commentaires, vous voulez probablement un style sur l'ul et tous les éléments qui se trouvent à l'intérieur des li et des li eux-mêmes pour que les choses soient belles.

— rz.
source

7

Pendant que cela fait le travail, vous voudrez également inclure du rembourrage pour que les éléments restent bien espacés

— Rob Allen

1

correct, cela rend simplement la liste horizontale. vous voulez probablement ajouter un peu plus de style à l'ul, au li et à tout ce qui se passe dans le li pour rendre les choses jolies.

— rz.

1

Comment faire en sorte que les balles restent? Ou pouvons-nous les balles d'une autre manière.

— RD

1

comme le souligne @DotDot: l'utilisation de {display: inline} supprime le style de puce. Pour contourner ce problème: 1. utilisez {float: left} à la place (ne fonctionne pas sur IE9 cependant). 2. ajoutez un remplissage à gauche et ajoutez une image d'arrière-plan (qui est la puce comme image d'arrière-plan).

— Adrien Be

26

Dans les navigateurs modernes, vous pouvez effectuer les opérations suivantes (compatible CSS3)

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Développer l'extrait

— davidlbaileysr
source

15

Code HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Code CSS:

ul.list li{
  width: auto;
  float: left;
}

— Adel Aaji
source

9

Essayez également d'expérimenter quelque chose comme ceci:

HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

J'ai fait un codepen pour illustrer: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
source

0

dans le bootstrap, utilisez la .list-inlineclasse css

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Réf: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— Matee Gojra
source