Making an unordered list stretch horizontally so as to always fill up a div

Question

Sorry about this, I thought this issue was resolved, but then it turned out that it wasn't.

I have an unordered list inside a div, and I want the list to always fill up the entire div horizontally, no matter what the zoom level. How does one go about this? Set the width of each list item individually? I tried this, and the widths of my items do add up to 100%, yet the list still does not fill up the div. I'm modifying a template, too, so much of the HTML is hidden from me, but I can edit CSS all I want to. What else can I do in terms of CSS? Padding? Something involving the calc function? I've experimented with all of these, but somehow nothing seems to work.

Are there any other ideas as to how this can be done?

Solution 1

Try this

 ul { padding:0; margin:0; white-space:nowrap; }
 li { width: 100%; list-style-type:none; display:inline-block; }

or

ul {
  width: 100%;
  display: table;
  table-layout: fixed;
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

Solution 2

The browser support is a bit iffy, but if you want your list items to always take up the full width of their container, you can use a combination of display: table and display: table-cell with your list items:

ul {
    display: table;
}

li {
    display: table-cell;
}

Solution 3

You can try this Html:

<ul>
    <li>first list</li>
    <li>Second</li>
    <li>Third list</li>
    <li>Fourth</li>
</ul>

CSS:

body {
    border: 1px dashed #CCC;   
    margin: 5px;
    min-height:400px;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 25%;  
    text-align:center;
}

Check this fiddle : http://jsfiddle.net/Kritika/tfSSe/