CSS styling navigation buttons

You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/

I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.

Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items tha开发者_Go百科t I'd like to get rid of.

Is this possible? Thanks for any help.

I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.

Example

CSS

ul {
    display: table; 
    width: 100%;
}

ul li {
    display: table-cell;
}

ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
}

jsFiddle.

jsFiddle with one more li, you'll notice the CSS is constant :P