CSS
Layout di blocco in linea

Barra di navigazione giustificata

La barra di navigazione (menu) orizzontalmente giustificata presenta un numero di elementi che dovrebbe essere giustificato. La prima voce (a sinistra) non ha margine sinistro all'interno del contenitore, l'ultima (a destra) elemento non ha margine destro all'interno del contenitore. La distanza tra gli articoli è uguale, indipendente dalla larghezza dell'oggetto singolo.

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;
}

Gli appunti

• I tag nav , ul e li sono stati scelti per il loro significato semantico di 'una lista di voci di navigazione (menu)'. Naturalmente è possibile utilizzare anche altri tag.
• Lo pseudo-elemento :after causa una "linea" in più nella ul e quindi un'altezza extra vuota di questo blocco, spingendo verso il basso altri contenuti. Questo è risolto dal margin-bottom negativo margin-bottom , che deve avere la stessa grandezza line-height della line-height (ma negativo).
• Se la pagina diventa troppo stretta per tutti gli elementi da adattare, gli elementi si romperanno su una nuova riga (partendo da destra) e saranno giustificati su questa linea. L'altezza totale del menu aumenterà in base alle esigenze.