Comment puis-je créer des menus horizontaux parfaitement alignés avec HTML et CSS ?

Justifier les menus horizontaux avec HTML et CSS

Dans la construction de menus HTML, l'alignement horizontal des éléments de menu est souvent négligé. Réaliser cet alignement peut être étonnamment difficile, nécessitant une combinaison judicieuse de HTML et CSS.

L'énigme de l'alignement

Plusieurs obstacles rendent cet alignement complexe :

• Un nombre variable d'éléments de menu nécessite une dynamique solutions.
• L'alignement doit être optimal, avec des éléments répartis uniformément dans la barre de menu.
• Le premier et le dernier élément doivent être conformes aux alignements gauche et droit, respectivement.

Une solution simple et efficace

Malgré la complexité, une technique simple existe pour résoudre ce problème problème :

1. Créer un élément de saut de ligne : Insérez un élément à la fin de la ligne qui dépasse l'espace restant.
2. Masquer l'élément : Utilisez CSS pour masquer cet élément, en vous assurant qu'il ne perturbe pas la présentation visuelle.

Une méthode pratique exemple utilisant un élément span :

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

<div>

Cette approche applique des sauts de ligne, répartissant efficacement les éléments de menu de manière uniforme tout en conservant un alignement optimal.

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!