Make fit the width of the using CSS

I’ve found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery 🙂

JSFiddle