Making an unordered list span 100% the width of a div

Question

<div>
  <ul>
    <li>First</l1>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>


div {
  width: 100%;
}
li {
  list-style: none;
  float: left;
}

With CSS, is there a way to make the LI tags automatically fill the whole width of the parent div, evenly? So they'd each take up 25%.

Specifying 'width' as 25% would obviously work but it's not solution I'm after. The menu in question is dynamically created and new items are created and deleted at times.

Cheers

Answer 1

I think you have three options:

1. Use JavaScript to calculate the sizes

2. Use a table, as discussed in this question (this is actually not a bad option — it’s pure HTML and CSS

3. If you’re only targeting new browsers, you can use the new flexible box component of CSS (shown here with a couple of vendor prefixes):

   ul{
       padding: 0;
       display: -webkit-box;
       display: -moz-box;
       display: box;
   }
   li{
       list-style: none;
       list-style:none;
       text-align: center;
       -webkit-box-flex: 1;
       -moz-box-flex: 1;
       box-flex: 1;
   }