HTML List element : Sharing the parent width into equal parts

Question

I have a parent <ol> and couple of <li> items in that.

<ol style='width=800px;display :block;float:left;'>    <li style='display :block;float:left;'> Item 1  </li>    <li style='display :block;float:left;'>  Item 2 </li>    <li style='display :block;float:left;'>  Item 3 </li>    <li style='display :block;float:left;'>  Item 4 </li>  </ol> 

Is there any way my list item can be arranged in a way where it will equally divide the parent width (800px), and each item will have the same amount of width? I.e. each <li> will take 200px width.

I don’t want to hardcode the value. Is there any style attribute which will do that?

I dont want to hardocode the width like 20 % or something because the list items are dynamically added.it may be 4 or 5 or 6 sometimes

Answer 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>