Evenly spaced list items

Question

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

the point being that the items need to be individually spaced from absolute left to right.

Setting widths is a pain because different browsers appear to interpret them differently. Also, the number of items in this list will change depending on the user.

Any advice would be appreciated!

---

Following @Dean advice, I've found myself with the below - which is pretty much correct. The only thing I'm thinking is that the left two elements are unfortunately short, hence the large gap. I'm hoping the client will be happy with text-align; center on all the elements with a touch of padding at the side!

Answer 1

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

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.