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

Solution 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;
   }
   

Solution 2

ul{
  display:block;
  margin:0;
  padding:0;
}

li{
  display:block;
  width:25%;
  margin:0;
  padding:0;
  float:left;
  list-style:none;
}

Comments

[Allan Thomas]

My question stated that a percentage width in this case is not the solution I'm after.

[Allan Thomas]

I knew about the display inline rule. It was more a question of the width. Thanks

[beerwin]

otherwise you could give them fixed widths, if you know how wide the div would be, as it fits in some other element (with that 100% width)

[Allan Thomas]

I know it would work for a static menu. The menu I'm asking the question for has items added and deleted occasionally through a CMS therefore this is not the solution.

[beerwin]

so, if you have three items, those three should fill the entire div, or if you have 5 and so on?

[Allan Thomas]

Yes. I have a solution written in jQuery because I couldn't think if it was possible purely with CSS

[beerwin]

let us continue this discussion in chat

[Jamie Paterson]

Dont forget to remove floats on the li if there are any.