Pourquoi les éléments de ma liste horizontale ne s'affichent-ils pas correctement ?

Éléments de liste horizontale : dépannage et solutions

En essayant de créer une liste horizontale pour un site Web, vous avez rencontré des problèmes malgré l'application de solutions couramment suggérées comme le réglage de « float » à gauche. Pour diagnostiquer et résoudre ce problème, examinons la structure HTML et CSS fournie.

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  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>

Analysis

La structure de code fournie est presque correcte. . Cependant, vous avez défini la propriété « display » des éléments « li » sur « inline » au lieu de « inline-block ». Cela empêche les éléments de circuler horizontalement.

Solution

Pour créer une liste horizontale, modifiez la propriété 'display' des éléments 'li' en 'inline- block' dans votre CSS :

ul#menuItems li {
  display: inline-block;
}

En mettant à jour votre CSS comme suggéré, les éléments de votre liste s'afficheront désormais horizontalement, comme prévu.

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!