Menü horizontal ausrichten

[Gunnar Bittersmann]

@@Matthias Apsel

#Navigation
{
    display: table;
    min-width: 100%;
}

#Navigation li
{
    display: table-cell;
}

Keine gute Idee. Wenn das Menü nicht in eine Zeile passt, verschwindet es im Nirvana.

Eine gute Idee ist Flexbox: Variante 1

Nun ist es bei justify-content: space-around so, dass „Flex items are evenly distributed in the line, with half-size spaces on either end.“ [Spec]

Pseudoelemente schaffen auch am Anfang und Ende denselben Platz wie zwischen den Items: Variante 2

(Dann liefern space-around und space-between dasselbe Ergebnis.)

Allerdings sieht es, wenn’s mehrzeilig wird, nicht wirklich schön aus …

LLAP