Stretch list items <li> to fill the width of <ul>

Question

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:

This is what I want:

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 to get you started.

Note: I don't want to hard-code the width in CSS. 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.

Answer 1

Demo HI now you can do this

Used to display :table and display:table-cell

as like this

Css

ul {     border:1px dotted black;     padding: 0;     display:table;     width:100%;     box-sizing:border-box;     -moz-box-sizing:border-box;     -webkit-box-sizing:border-box; } li {     background-color: red;     display:table-cell; } li:nth-child(2n) {     background-color: #0F0; } 

Now define your parent display:table; or width:100%; and define your child display:table-cell;

Demo