Full width horizontal nav bar with evenly spaced items

问题

Starting point:

End point:

I'm trying to have a horizontal navigation bar that fills 100% of it's container. In the first example, you'll see all of the items aligned to the left. I'm trying to get it to fill the full width of the container as shown in the second example. I want the spacing between all of the items to be uniform (unlike the way it's shown, I just put that together quickly to give you an idea of what I'm trying to do). I need the text to not be an image and the container it goes in is fluid not fixed.

回答1:

With a static number of elements it's easy - http://jsfiddle.net/X56cJ/

However, if you want to have uniform spacing between the text, not the elements themselves - it becomes tricky. Again, if the number of elements doesn't change, you do it with css classes and static widths. Otherwise it'll have to be javascript

EDIT: Here's the JavaScript way of getting same space between elements.

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');
    });
}

Full example here

回答2:

Using display: table on your parent, and display: table-cell on your children will do the trick. This is not supported in <= IE7.

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

回答3:

If you know how many elements you'll have, you can specify a width of each element as a percent. Otherwise it won't be possible without resorting to tables or javascript.

来源：https://stackoverflow.com/questions/7652509/full-width-horizontal-nav-bar-with-evenly-spaced-items

标签

css

navigationbar