CSS
Inline-blokindeling

Gerechtvaardigde navigatiebalk

De horizontaal gerechtvaardigde navigatiebalk (menu) bevat een aantal items die moeten worden gerechtvaardigd. Het eerste (linker) artikel heeft geen linkermarge in de container, het laatste (rechter) artikel heeft geen rechtermarge in de container. De afstand tussen items is gelijk, onafhankelijk van de individuele itembreedte.

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

Notes

• De nav , ul en li tags werden gekozen vanwege hun semantische betekenis van 'een lijst met navigatie (menu) items'. Natuurlijk kunnen ook andere tags worden gebruikt.
• Het :after pseudo-element veroorzaakt een extra 'lijn' in de ul en dus een extra, lege hoogte van dit blok, waardoor andere inhoud naar beneden wordt geduwd. Dit wordt opgelost door de negatieve margin-bottom , die dezelfde grootte moet hebben als de line-height (maar negatief).
• Als de pagina te smal wordt voor alle items om te passen, worden de items afgebroken naar een nieuwe regel (vanaf rechts) en worden ze op deze regel gerechtvaardigd. De totale hoogte van het menu zal naar behoefte toenemen.