CSS
Inline-Block-Layout

Berechtigte Navigationsleiste

Die horizontal ausgerichtete Navigationsleiste (Menüleiste) enthält einige Elemente, die gerechtfertigt sein sollten. Das erste (linke) Element hat keinen linken Rand innerhalb des Containers, das letzte (rechte) Element hat keinen rechten Rand innerhalb des Containers. Der Abstand zwischen den Artikeln ist unabhängig von der Breite der einzelnen Artikel gleich.

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

Anmerkungen

• Die Tags nav , ul und li wurden aufgrund ihrer semantischen Bedeutung von "Liste der Navigationselemente (Menüelemente)" ausgewählt. Natürlich können auch andere Tags verwendet werden.
• Das :after -Pseudoelement bewirkt eine zusätzliche 'Linie' in der ul und damit eine zusätzliche, leere Höhe dieses Blocks, die den anderen Inhalt nach unten drückt. Dies wird durch den negativen margin-bottom gelöst, der die gleiche Höhe wie die line-height (aber negativ).
• Wenn die Seite für alle Elemente zu eng wird, werden die Elemente in eine neue Zeile (von rechts beginnend) aufgeteilt und in dieser Zeile begründet. Die Gesamthöhe des Menüs wird nach Bedarf größer.