I have an unordered list (`<ul>`) with various number of items (`<li>`) in it. I want to use one CSS styling that allows the items to stretch to the width of the list.

This is what I have:

![enter image description here](https://i.stack.imgur.com/eFhlT.png)

This is what I want:

![enter image description here](https://i.stack.imgur.com/XQBad.png)

HTML:

```
These 4 items should fill the width:<br/>
<ul id="ul1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
These 5 items should fill the width:<br/>
<ul id="ul2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
And so on and so forth...

```

Here is the [JSFiddle](http://jsfiddle.net/AwWUA/) to get you started.

Note: I don't want to [hard-code the `width` in CSS](http://jsfiddle.net/AwWUA/1/).
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.