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

css

Solution

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

Problem

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.

Original source