Stretch list items to fill the width of

Question

I have an unordered list (

) with various number of items (
• ) in it. I want to use one CSS styling that allows the items to stretch t

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