Evenly spread links over a horizontal navigation

Question

I'm trying to find a simple method of getting all the links spread evenly over the horizontal navigation. This would be very easy if it would be a fixed amount of links, but they will be dynamic.

So it could be either 5 or 10 links, nobody knows. Despite the amount of links I would like them to spread evenly across the navigation without using a table.

The reason I don't want to use a table is because it will break the UL LI structure which is (apparently) considered the way to go when building a navigation (SEO).

Here's a jsFiddle explaining it more in depth: http://jsfiddle.net/pkK8C/19/

Looking for the most light method.

Thank you in advance.

Answer 1

Use display: table for UL and display: table-cell for LI. And display-table.htc for IE6/7 if they matter.

Answer 2

Old browser might be a headache, but it works for new ones:

div#navigation ul {
    list-style-type:none;
    height:30px;
    text-align:center;
    width: 100%;      /* new */
    display: table;   /* updated */
}

div#navigation ul li {        
    margin-left:50px;
    display: table-cell;  /* updated */  
}