Tableless horizontal navigation bar with padding and even spacing; no space between elements, no unused container space, and no fixed width (so works for any number of elements!).Fiddle at http://jsfiddle.net/VBcUM/2/

dabblet.css

/**
 * Using display: table-cell to evenly determine widths. You can add an arbitrary number of <li>
 */


ul {
	padding: 0;
	display: table;
	width: 100%;
	table-layout: fixed;
}
li {
	display: table-cell;
}
a {
	display: block;
	padding: 1em;
	text-align: center;
	background: white;
}
a:hover {
	background: lime;
}

dabblet.html

<ul>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
  <li><a href="#">Consectetur</a></li>
  <li><a href="#">Adipiscing</a></li>
</ul>

dabblet.less

ul {
	padding: 0;
	display: table;
	width: 100%;
	table-layout: fixed;
	li {
		display: table-cell;
		a {
			display: block;
			padding: 1em;
			text-align: center;
			background: white;
			&:hover {
				background: lime;
			}
		}
	}
}