title: Stretch list items <li> to fill the width of <ul>
body: <p>I have an unordered list (<code>&lt;ul&gt;</code>) with various number of items (<code>&lt;li&gt;</code>) in it. I want to use one CSS styling that allows the items to stretch to the width of the list.</p>
  
  <p>This is what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/eFhlT.png" alt="enter image description here"></p>
  
  <p>This is what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/XQBad.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>These 4 items should fill the width:&lt;br/&gt;
  &lt;ul id="ul1"&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
  &lt;/ul&gt;
  &lt;br/&gt;
  These 5 items should fill the width:&lt;br/&gt;
  &lt;ul id="ul2"&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
  &lt;/ul&gt;
  &lt;br/&gt;
  And so on and so forth...
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/AwWUA/" rel="noreferrer">JSFiddle</a> to get you started.</p>
  
  <p>Note: I don't want to <a href="http://jsfiddle.net/AwWUA/1/" rel="noreferrer">hard-code the <code>width</code> in CSS</a>.
  Note: If you are wondering about the use-case, this is a navigation structure in a responsive design and I want the list items to always fill up the available width no matter what is the resolution.</p>