CSS
Inline-blocklayout

Motiverad navigationsfält

Den horisontellt motiverade navigeringsfältet (meny) har ett antal objekt som bör vara motiverade. Den första (vänster) artikeln har ingen vänstermarginal i behållaren, den sista (höger) artikeln har ingen högermarginal i behållaren. Avståndet mellan artiklarna är lika oberoende av den enskilda artikelns bredd.

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

anteckningar

• nav , ul och li taggarna valdes för sin semantiska betydelse av "en lista med navigations- (meny) -objekt". Andra taggar kan också användas naturligtvis.
• Den :after pseudo-element orsakar en extra "linje" i ul och därmed en extra, tom höjd på detta block, som skjuter ner annat innehåll. Detta löses med den negativa margin-bottom , som måste ha samma storlek som line-height (men negativ).
• Om sidan blir för smal för att alla objekt ska passa, kommer artiklarna att brytas till en ny rad (från höger) och motiveras på den här raden. Menyns totala höjd växer efter behov.