CSS: Afficher éléments "li" côte à côte

Les éléments li sont, par défaut, des éléments de type bloc (block). Donc ils s'affichent les uns en dessous des autres.

Au moyen de "display:inline" ou "display:inline-block", vous pouvez modifier cette propriété et afficher les éléments les uns à côté des autres, sur une même ligne (inline):

li {
  display: inline-block;
}

À ce stade, il est judicieux de modifier également d’autres aspects du format:

li {
  display: inline-block;
  list-style-type: none;
  padding-right: 10px;
}

Avec ceci, nous veillons à ce que, outre l’affichage côte à côte, les puces précédant les éléments de la liste disparaissent et qu’un léger espacement soit instauré entre ces éléments.

@media (max-width: 600px) {
  li {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
  }
}

Vous avez indiqué que vous ne souhaitez appliquer la modification relative aux éléments li que lorsque la largeur de la page dans le navigateur diminue. Vous pouvez y parvenir comme illustré dans le dernier exemple. Avec ce CSS, la mise en forme de la liste ne s'active que lorsque la largeur de la fenêtre est inférieure à 600 px.
31/10/2026 à 19:23