HTML List element : Sharing the parent width into equal parts

Solution 1:

Try this: http://jsfiddle.net/QzYAr/

• For details on display: table-cell: Is there a disadvantage of using `display:table-cell`on divs?
• table-layout: fixed ensures equal width li elements.

CSS:

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the magic dust that ensures equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

HTML:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

Solution 2:

I think this is what you're asking for. It required jQuery though.

http://jsfiddle.net/sKPLQ/3/

CSS:

ul {
    width: 800px;
}

li {
    display: inline-block;
    float:left;
}

JS:

var evenWidth = $(".list").width()/$(".list li").size();
$(".list li").css("width", evenWidth);

HTML:

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>