HTML List element : Sharing the parent width into equal parts

Question

I have a parent

and couple of
1. items in that.

   
      &         
   
   
           

Answer 1

Here is a minimalistic design. It will produce responsive equal distance cells

<style>
   div { border:1px solid red; width:400px; height:400px; }
   ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
   li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>

<div>
   <ul>
      <li>CELL 1</li>
      <li>CELL 2</li>
      <li>CELL 3</li>
      <li>CELL 4</li>
   </ul>
</div>

The magic is width:1%; position:relative; display:table-cell;

Answer 2

Please note: The original poster edited their question to exclude percent after I posted this answer.

Yes, you simply need to figure out the percent that each will use. In this case, 20%.

Also, you have some slight problems with your HTML (missing quote and width= instead of the correct width:).

<style>
    ol { width:800px;display :block;float:left; }
    li { border:1px solid black; display :block;float:left; width:20%; }
</style>
<ol>
   <li> Item 1  </li>
   <li>  Item 2 </li>
   <li>  Item 3 </li>
   <li>  Item 4 </li> 
</ol>

---

Update:

While you can get away without defining pixels by using a percentage, there is no way with block elements to get away without defining any width value (and width values are only valid as a unit or a percentage).

Not that I'm suggesting you use tables, but table cells are the only elements in HTML that sort of behave like what you are asking for.

Answer 3

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>

Answer 4

As Renesis pointed out, I think table cells is the only option, unless you're scripting it. Although you can use table-cell in CSS.

#menu {display: table-row;}
#menu li {display: table-cell;}

..which will simulate the behaviour. Note that in IE it will, as usual, cause problems in the lower versions.

Answer 5

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>