Evenly-spaced navigation links that take up entire width of ul in CSS3

Question

I\'d like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container

Answer 1

If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.

Here's the CSS to do it:

ul {
  display: box;
}

li {
  box-flex: 1;
}

But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.

Here's a demo: http://jsfiddle.net/tBu4a/9/