CSS menu with width 100%

I'm trying to make a navigation bar with ul/li but I want it to take all the availa开发者_JAVA技巧ble width and distribute the size between the li's inside it.

Is it possible?

thanks!

You can use the table styles. Note that these are not supported in < IE8.

HTML

<ul>
    <li>home</li>
    <li>about</li>
    <li>contact</li>
</ul>

CSS

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

ul li {
   display: table-cell; 
}

jsFiddle.

The borders in the jsFiddle there are for visual aid only. They are not necessary.