title: Horizontal list items - fit to 100% with even spacing
body: <p>I have a simple list and i am trying to get the list items to be evenly spaced horizontally, but still fill 100% of the width of the container regardless of the width of the container.</p>
  
  <p>I do not want each list item to be of equal width, but instead the spacing between each list item to be even:</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/b6muX/1/">http://jsfiddle.net/b6muX/1/</a></p>
  
  <p>Also the number of list items might be dynamic and not the same as the number in my example.</p>
  
  <p>Can this be done without js?</p>
  
  <p>Here is my markup and css:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;This is menu item 1&lt;/li&gt;
      &lt;li&gt;Number 2&lt;/li&gt;
      &lt;li&gt;Item Number 3&lt;/li&gt;
      &lt;li&gt;Menu 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the following css:</p>
  
  <pre><code>ul {
      width: 100%;
      background: #cacaca;
      margin: 0;
      padding: 0;
  }
  li {
      list-style-type: none;
      display: inline-block;
      padding-right: 10%;
      width: auto;
      margin-right: 0.5%;
      background: #fafafa;
      padding-left: 0;
      margin-left: 0;
  }
  li:last-child {
      margin-right: 0;
      padding-right: 0;
  }
  </code></pre>