NAV -Menü, das die gesamte Containerbreite mit einer konstanten horizontalen Polsterung umfasst

Question

Ich habe wie im Screenshot unten ein NAV -Menü erstellt. Es umfasst die gesamte Breite des Containers und die linke/rechte Polsterung jedes Menüpunkts ist konstant. Dies war leicht zu tun, indem die linke/rechte Polsterung im CSS festgelegt wurde, aber ich möchte, dass sich die Paddings ändern können, wenn der Site Admin die Menüs bearbeitet.

Gibt es eine Möglichkeit, dies mit reinem CSS zu tun (CSS3 ist in Ordnung)?

Dies war mit JQuery leicht zu tun (ich habe die Breite der Menüelemente insgesamt hochgezogen und die erforderliche Polsterung berechnet). Aufgrund der Verwendung von Google -Web -Schriftarten habe ich jedoch einige Probleme in einigen Browsern gestoßen. Bei Chrome und Firefox 4 unter Windows (nicht auf Mac) wurde die Web -Schriftart zu dem Zeitpunkt, an dem mein Skript ausgeführt wurde, nicht geladen, was zu falschen Breitenmessungen führte. Ich habe versucht, das Skript im Skript auszuführen JQuery's Dom Ready Event und in der Das aktive Ereignis von Google Font API. Das active Das Ereignis arbeitete in Chrome, aber in Firefox 4 wurde es oft abgefeuert, bevor die Schriftart angewendet worden war.

Danke im Voraus.

Answer 1

Verwenden Sie JQuery's .load Ereignis, wie von Benutzer Thirtydot vorgeschlagen.

Answer 2

Hier ist ein Jsfiddle einer potenziellen unterschiedlichen Lösung.

Unter Verwendung dieses Layouts und unter der Annahme, dass sich die Anzahl der Menüelemente ändern wird, rufen Sie eine Neuberechnung auf, sobald ein Listenelement hinzugefügt/entfernt wurde. In diesem Beispiel habe ich YUI3 verwendet, um die DOM -Manipulation durchzuführen, aber Sie könnten dies auf eine Reihe von Möglichkeiten tun. HINWEIS - Ich habe die JavaScript -Funktion nicht getestet, ihr "wahrscheinlich funktionierender Pseudocode".

(Möglicherweise müssen Sie weitere 2% von den Listenelementenbreiten abziehen, wenn Sie versuchen, mit IE6/7 umzugehen.)