Maison > interface Web > tutoriel CSS > Comment justifier un menu horizontal en HTML CSS ?

Comment justifier un menu horizontal en HTML CSS ?

Linda Hamilton
Libérer: 2024-11-28 00:27:15
original
671 Les gens l'ont consulté

How to Justify a Horizontal Menu in 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>
Copier après la connexion

CSS

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}
Copier après la connexion

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

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal