Evenly spaced list items

Question

I\'ve been tasked with generating a horizontal nav list that looks like this:

Answer 1

I don't think this needs a list. Couldn't you just create a series of words in a div with text-align: justify?

Answer 2

You won't be able to get this working well in IE6, but you can use this for all major browsers:

ul {
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */  
}
li { display: table-cell; text-align: center; }

For IE6 (possibly 7) you will need to use Javascript to calculate the widths dynamically.

Also don't forget to text-align: left your first list item, and text-align: right the last.

Answer 3

I made a jsFiddle of your menu... everything is perfectly spaced, dynamic, and it goes all the way to the left/right edges without JavaScript or weird/ugly HTML semantic issues. (And it should work in IE 6, if it matters.)

http://jsfiddle.net/bXKFA/2/

HTML:

<div id="menuwrapper">
    <div class="menuitem">CAREERS</div>
    <div class="menuitem">TRADE</div>
    <div class="menuitem">CONTACT US</div>
    <div class="menuitem">PRIVACY POLICY</div>
    <div class="menuitem">T&amp;CS</div>
    <div class="menuitem">SITEMAP</div>
    <div class="menuitem">CORPORATE</div>
    <div class="menuitem">ACCESSIBILITY</div>
    <span class="stretcher"></span>
</div>

CSS:

#menuwrapper {
    height: auto;
    background: #000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.menuitem {
    width: auto;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    background: #000;
    color: yellow;
}

.stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

I based it on thirtydot's answer in this thread...

Fluid width with equally spaced DIVs