Volle Breite horizontale Navigationsleiste mit gleichmäßig beabstandeten Positionen

Ausgangspunkt:

Ausgangspunkt http://img12.imageshack.us/img12/3100/example1a.gif

Endpunkt:

Ende Punkt http://img846.imageshack.us/img846/799/example2w.gif

Ich versuche eine horizontale navigation bar, die füllt sich zu 100% im container. Im ersten Beispiel, du wirst sehen, all die Elemente, die Links ausgerichtet. Ich versuche, es zu füllen die volle Breite des Containers ein, wie im zweiten Beispiel. Ich möchte den Abstand zwischen allen Elementen einheitlich (im Gegensatz zu der Art, wie es gezeigt, ich sage nur, dass schnell zusammen, um Ihnen eine Vorstellung von dem, was ich versuche zu tun). Ich brauche den text nicht zu sein, ein Bild und den container geht es in Flüssigkeit nicht behoben.

  • Sie werden in der Regel müssen wissen, wie viele Elemente, die Sie in Ihrem Menü ziehen Sie diese mit einem ab. wenn Sie 5 Elemente, die Sie festlegen, wird jedes Element als 20% der Breite usw.
InformationsquelleAutor Tom | 2011-10-04
  1. 10

    Mit einer statischen Anzahl von Elementen, die es einfach http://jsfiddle.net/X56cJ/

    Jedoch, wenn Sie wollen, um einheitliche Abstände zwischen dem text, nicht die Elemente selbst - wird es knifflig. Wieder, wenn die Anzahl der Elemente ändern sich nicht, Sie tun es mit css-Klassen und statische breiten. Ansonsten müssen javascript

    BEARBEITEN: Hier ist der JavaScript Weg, um in der gleichen Raum zwischen den Elementen.

    HTML:

    <ul class="menu">
    <li>About Us</li>
    <li>Our Products</li>
    <li>FAQs</li>
    <li>Contact</li>
    <li>Login</li>
</ul>

    JS:

    function alignMenuItems(){
    var totEltWidth = 0;
    var menuWidth = $('ul.menu')[0].offsetWidth;
    var availableWidth = 0;
    var space = 0;

    var elts = $('.menu li');
    elts.each(function(inx, elt) {
        //reset paddding to 0 to get correct offsetwidth
        $(elt).css('padding-left', '0px');
        $(elt).css('padding-right', '0px');

        totEltWidth += elt.offsetWidth;
    });

    availableWidth = menuWidth - totEltWidth;

    space = availableWidth/(elts.length);

    elts.each(function(inx, elt) {
        $(elt).css('padding-left', (space/2) + 'px');
        $(elt).css('padding-right', (space/2) + 'px');
    });
}

    Vollständiges Beispiel hier

    • Ja, muss ich eine statische Anzahl von Elementen, und das ist, was ich für das Schießen wird ein gleichmäßiger Abstand zwischen dem text. Irgendwelche Vorschläge, werde die Javascript-route?
    • Wenn Sie eine statische Anzahl von Elementen, die, als Sie verwenden können, Reine CSS-Option, um die Breite von jedem element. Es werde ein wenig Zeit nehmen, um die breiten richtig, aber es ist machbar. Zwar konnte man JS verwenden für diese CSS wird ein bisschen einfacher.
    InformationsquelleAutor MK_Dev
  2. 3

    Mithilfe von display: table auf Ihre Eltern und display: table-cell auf Ihre Kinder wird den trick tun. Dies wird nicht unterstützt, in <= IE7.

    http://codepen.io/simply-simpy/pen/jzski

    • Das funktioniert nur, wenn alle Ihre Titel sind die gleiche Größe. Hinzufügen <li><a href="#">fivesixseveneightnineten</li> auf Ihrer Liste und Sie werden sehen, was ich meine.
    • Danke @bronson-ich Hinzugefügt width: 25% und es funktioniert mit einem mehr-link. -- codepen.io/einfach-simpy/pen/jzski
    • Flex-box ist wahrscheinlich eine bessere Lösung voran.
    InformationsquelleAutor Scott Simpson
  3. 1

    Wenn Sie wissen, wie viele Elemente Sie haben, können Sie eine Breite jedes element als ein Prozent. Andernfalls wird es nicht möglich sein, ohne Rückgriff auf Tabellen oder javascript.

    InformationsquelleAutor Darth Egregious
Schreibe einen Kommentar