Full width horizontal nav bar with evenly spaced items

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

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