Equally share width of amongst children

Question

Possible Duplicate:
HTML List element : Sharing the parent width into equal parts

I have a div that contains a ul element:

<div style="width: 800px">
    <ul style="width: 100%">
        <li>...</li>
        ....
        <li>...</li>
    </ul>
</div>

How do I automatically give the li elements equal space throughout the ul?

Answer 1

If you are looking to span a list horizontally, this should suffice:

HTML
<div>
    <ul id="list">
        <li><a href="#">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

CSS
#list li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

In this case, I adjust the padding to span the items evenly as I would like them to be.

Answer 2

I would use this css:

 #list li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    ***width:100px;***
}