Screencast: Menüpunkte gleichmäßig horizontal verteilen mit text-align: justify;

Themenvorschläge? Wünsche für weitere Screencasts? Wenn es euch gefallen hat, vergesst nicht den Like. Danke! n_n

Mittlerweile wurde auch eine 100% funktionierende Lösung gefunden: CodePen. Ein Dankeschön geht an Christopher Bohnenberger!

Update: Funktioniert offenbar nicht in Firefox. :/

So funktioniert es in Firefox, dann bleibt aber noch der Abstand unten: CodePen.

Abonnieren für mehr Screencasts.

Veröffentlicht am Freitag, 07. Februar 2014 | Kommentieren

Kommentare

  1. Cooler Trick – ein Kollege kam vor ein paar Monaten auf die gleiche Lösung, allerdings für ein etwas anderes Problem: Logo links, Navi rechts, gleiche Baseline.

    Eine Sache finde ich in deinem Beispiel etwas unschön: Den Kommentar hinter dem letzten LI, um den Whitespace zu unterdrücken. Das kann man ggf. in der Praxis nicht steuern/verwenden.

    Daher mein Vorschlag: font-size:0; line-height:0 für die UL, zurück auf den gewünschten Wert in den LIs.*

    Damit lässt sich dann auch display:inline-block; width:100% für das Pseudo-Element nutzen. Dein margin-left:100% ist aber smarter – kürzer – sehr cool!

    Es gibt leider noch ein mögliches Problem: HTML-Komprimierung kann gefährlich werden, wenn sie den Whitespace zwischen den LIs wegschmeißt. Dann funktioniert das text-align:justify nicht mehr. Ist uns in der Praxis schon passiert.

    Insgesamt aber ne sehr schöne Lösung! Man sollte viel mehr display:inline-block statt float zum Layouten verwenden – das funktioniert in allen relevanten Browsern und spart einem die Clearfixes. Außerdem hat man Kontrolle über das vertical-align.

    *) Dadurch häufen sich zwar die font-size-Definitionen im CSS, aber mit Sass-/Less-Mixins ist das sehr gut handhabbar. word-spacing:-.31em / word-spacing:0 habe ich als Alternative mal gecheckt, funktioniert aber leider nicht unter iOS… :(

  2. Leider werden bei mir in Firefox 25.0.1 unter OS X 10.7 die Menüpunkte nicht verteilt – in Safari geht es. Hast du das auch in anderen Browsern getestet, beziehungsweise wo ist mein Fehler?

  3. @Thomas Ich habe es ne Weile nicht mehr in Firefox getestet, sollte aber im Prinzip funktionieren. Hast du einen CodePen gemacht? Dann poste gern den Link hier mal und ich schaue nach.

  4. Ups – gerade in deinem anderen Video gemerkt, dass ich eine veraltete FF-Version einsetze. Keine Ahnung, wieso die Updates ausgestellt waren. Jetzt bin ich auf Version 27.0, allerdings keine Besserung im oben genannten Problem.

  5. Danke für deine Antwort, Martin! Leider vor meinem zweiten Kommentar nicht mehr gesehen, daher muss ich hier jetzt mit einem dritten Kommentar nachschieben:

    Ich habe, um eigenen Fehlern vorzubeugen, einfach dein Beispiel von oben betrachtet ( http://codepen.io/martinwolf/pen/5c727e83a60452bdeb81fa328cdd8921 ). Dabei werden allerdings die Elemente einfach hintereinander in der Reihe aufgelistet, aber nicht über die Zeile verteilt. Ich teste mal weiter, falls ich dahinter komme, was stört, melde ich mich natürlich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.