CSS
Disposition en ligne intégrée

Barre de navigation justifiée

La barre de navigation (menu) justifiée horizontalement contient un certain nombre d'éléments à justifier. Le premier élément (à gauche) n'a pas de marge gauche dans le conteneur, le dernier élément (à droite) n'a pas de marge droite dans le conteneur. La distance entre les éléments est la même, indépendamment de la largeur de chaque élément.

HTML

<nav>
    <ul>
        <li>abc</li>
        <li>abcdefghijkl</li>
        <li>abcdef</li>
    </ul>
</nav>

CSS

nav {
    width: 100%;
    line-height: 1.4em;
}
ul {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: justify;
    margin-bottom: -1.4em;
}
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}
li {
    display: inline-block;
}

Remarques

• Les balises nav , ul et li ont été choisies pour leur signification sémantique «une liste d'éléments de navigation (menu)». D'autres balises peuvent également être utilisées bien sûr.
• Le pseudo-élément :after provoque une "ligne" supplémentaire dans l' ul et donc une hauteur supplémentaire vide de ce bloc, poussant d'autres contenus vers le bas. Ceci est résolu par la margin-bottom négative en margin-bottom , qui doit avoir la même amplitude que la line-height la line-height (mais négative).
• Si la page devient trop étroite pour que tous les éléments soient ajustés, les articles se retrouveront sur une nouvelle ligne (en partant de la droite) et seront justifiés sur cette ligne. La hauteur totale du menu augmentera au besoin.