Horizontal ausgeglichenes Menü

Was ist das überhaupt?

Der erste Menüpunkt ist linksbündig, der letzte rechtsbündig und alle dazwischen sind gleichmäßig verteilt.

Und wie macht man das?

Ein einfaches text-align:justify hilft hier erst mal nicht weiter, da sich justify (also Blocksatz) immer nur auf mehrere Zeilen auswirkt, aber nie auf die letzte Zeile.

Deshalb muss man zusätzlich zu text-align:justify nach dem letzten Menüpunkt einen Zeilenumbruch erzwingen, damit die Menü-Zeile ausgeglichen wird. Das macht man mit einem überlangen „Wort“ aus Non-Breaking-Spaces, die man entweder per Alt-Leertaste oder per HTML-Entity   erzeugt.

So sieht’s aus

Schauen Sie in den Quelltext des Beispiels, bei dem auch die Adresszeile im Footer ausgeglichen ist. Verändern Sie die Fensterbreite und/oder Textgröße, um den Blocksatz-Effekt zu sehen.

Safari

In Safari werden im Gegensatz zu IE, Firefox und Opera auch Non-Breaking-Spaces (z. B. zur Gliederung einer Telefonnummer) ausgeglichen. Nehmen Sie stattdessen En-Spaces.