title: How to distribute HTML list items evenly in an unordered list
body: <p>I want my <code>li</code> elements that form a horizontal menu to be distributed evenly across the width of my <code>ul</code> element. I normally <code>float</code> my <code>li</code> elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my <code>ul</code> element to the right edge?</p>
  
  <p>Here's <a href="http://jsfiddle.net/UqcQc/">an example jsfiddle of a menu not distributed</a> across the <code>ul</code>.</p>
  
  <p>The spacing has to be the same between each <code>li</code>. But the <code>li</code> elements may be different lengths.</p>