Creating an unordered list spans 100% of the width of the 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 LI tags automatically fill the entire width of the parent div evenly? Thus, each of them will take 25%.

Setting "width" as 25% will obviously work, but this is not the solution I'm after. This menu is dynamically created, and new items are created and deleted from time to time.

Greetings

Answer 1

I think you have three options:

• Use JavaScript to calculate dimensions

• Use a table as discussed in this question ( this is actually not a bad option - its pure HTML and CSS

• If you focus only on new browsers, you can use the new CSS flexible block component (shown here using a pair of provider 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; } 

Answer 2

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

Answer 3

In my searches after a while I did not come across what allows me to dynamically indicate the width of the list item. If you are also asking how to make your list horizontal rather than vertical, use:

 li { display: inline; float: left; }