Evenly spaced list items

Question

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

Answer 1

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.