Comment justifier un menu horizontal en HTML et CSS ?

Justifier un menu horizontal en HTML et CSS : un guide complet

Les barres de menus horizontales sont un élément courant d'un site Web, mais obtenir une véritable justification peut être un défi. Les approches traditionnelles utilisant des tableaux ont des limites, telles que le premier et le dernier élément mal alignés.

Dilemme de justification

Justifier un menu implique :

• Gauche -aligner le premier élément de menu
• Aligner à droite le dernier menu item
• Espacer de manière optimale les éléments restants

La solution en ligne

Une solution transparente consiste à forcer un saut de ligne à l'aide d'un élément span. Cet élément occupe l'espace restant, assurant un espacement optimal.

Mise en œuvre

Pour implémenter cette méthode :

1. Définir l'alignement du texte : justifier ; sur le conteneur de menu.
2. Définir l'affichage : en ligne ; pour tous les enfants directs du menu.
3. Définir l'affichage : inline-block ; pour les éléments de menu (éléments
4. ).
5. Ajoutez un élément span au menu avec les styles suivants :

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

Cela crée un élément invisible avec une largeur suffisante pour forcer la justification, tout en conservant l'intégrité de la structure du menu.

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!