Comment créer une liste véritablement horizontale en CSS ?

Création d'éléments de liste horizontale

Lorsque vous essayez de créer une liste horizontale, vous pouvez rencontrer des problèmes où les éléments de la liste ne s'alignent pas horizontalement. Pour remédier à ce problème, voici une solution simplifiée :

Le problème :

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

L'utilisation de display: inline et des marges automatiques ne produit pas le résultat souhaité.

La solution :

ul > li {
    display: inline-block;
}

En employant display : bloc en ligne pour les éléments de la liste, ils se comporteront comme des blocs individuels dans le flux horizontal. Cela garantit que chaque élément enveloppe son contenu et s'aligne horizontalement.

Voici un extrait de code mis à jour :

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

<ul>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!