Comment justifier un menu horizontal en HTML CSS ?

Justifier un menu horizontal en HTML CSS : le guide définitif

Justifier une barre de menu horizontale est une tâche apparemment triviale, mais trouver une barre de menu propre et flexible qui s'adapte à différents contenus est étonnamment difficile.

Le Problème

Pour véritablement justifier un menu, chaque élément doit être positionné exactement comme le texte le serait sur une seule ligne. Cela signifie aligner à gauche le premier élément, aligner à droite le dernier élément et répartir les éléments restants uniformément entre les deux.

Les défis

• Utiliser un Le tableau est problématique car il n'aligne pas correctement le premier et le dernier élément lorsque les cellules sont centrées ou aligné à gauche/à droite.
• Le calcul des largeurs optimales pour chaque élément de menu n'est pas réalisable en raison du nombre variable d'éléments.

La solution

L'approche la plus simple consiste à forcer un saut de ligne en introduisant un élément qui occupe visuellement l'espace restant, puis à le masquer. Un élément span fonctionne parfaitement pour cela :

HTML

<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

Cette solution justifie efficacement les éléments de menu sans avoir besoin de pré-calculs ou de balisage supplémentaire.