Pourquoi les éléments de ma liste horizontale ne s'alignent-ils pas correctement et comment puis-je y remédier ?

Solution de formatage de listes horizontales

Les listes d'éléments horizontales sont un élément courant de conception Web, mais leur formatage peut être difficile. Un utilisateur a rencontré un problème avec une liste horizontale qui ne s'alignait pas correctement malgré des tentatives telles que définir « float » à gauche.

L'exemple de code fourni montre le balisage et les styles utilisés pour la liste horizontale :

ul#menuItems {
  ...
}
ul#menuItems li {
  display: inline;
  ...
}
ul#menuItems li a {
  ...
}

<ul>

Le problème provenait de l'utilisation de display: inline sur les éléments de la liste. Bien que cette méthode aligne les éléments de la liste horizontalement, elle supprime également l'espace entre eux. Pour résoudre ce problème, le code doit être mis à jour pour utiliser display: inline-block pour les éléments de la liste :

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

Avec cette modification, les éléments de la liste seront affichés horizontalement avec l'espacement souhaité. Le code HTML mis à jour suivant fonctionnera également :

<ul>
    
 some item

    
    
 another item

    

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!