Comment puis-je justifier parfaitement un menu horizontal contenant uniquement du texte en HTML et CSS ?

Justifier les menus horizontaux en HTML CSS : une solution complète

Malgré l'abondance de tutoriels sur les barres de menus en HTML, parvenir à une justification optimale des menus contenant uniquement du texte reste un défi . Cet article présentera une solution robuste qui garantit un alignement approprié, un espacement optimal et une flexibilité pour différents nombres d'éléments de menu.

Comprendre le problème

L'objectif est de créer un menu horizontal où :

• Le premier élément est aligné à gauche
• Le dernier élément est aligné à droite
• Les éléments restants sont répartis uniformément dans la barre de menu
• La solution devrait fonctionner avec un nombre variable d'éléments sans pré-calculer les largeurs optimales

L'Invisible Expansion Span

La clé pour parvenir à cette justification est d'insérer un élément invisible à la fin du menu qui force un saut de ligne. En masquant stratégiquement cet élément, nous pouvons créer l'espace nécessaire pour une distribution optimale des éléments.

Voici le code CSS et HTML optimal :

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

<div>

Comment ça marche

1. #menu définit la justification de l'ensemble du menu.
2. #menu * garantit que tous les enfants sont en ligne éléments.
3. #menu li crée des éléments de menu en blocs en ligne, leur permettant de s'écouler horizontalement.
4. L'étendue cachée (#menu span) s'étend pour remplir l'espace restant, forçant un saut de ligne et justifier correctement le menu.

Cette solution fournit un moyen élégant et efficace de créer des menus horizontaux justifiés en HTML CSS, garantissant un espacement et un alignement optimaux quel que soit le nombre de menus. articles.

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!