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

`style=width=800px;display :block;float:left;'` <-- You might wanna fix that too — kei, Jun 10 '11 at 18:41

score 50 · Accepted Answer · edited May 23 '17 at 12:16

50

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>

edited May 23 '17 at 12:16

Community

1
1

answered Jun 10 '11 at 19:12

thirtydot

224,678
48
389
349

Perhaps useful for others: table-layout: fixed; worked for me only after setting a width, e.g. width: 100%. The above post contains a width but I just wanted to emphasize that it was a necessary condition to make it work. – exchange May 13 '20 at 10:30

score 2 · Answer 2 · answered Mar 17 '15 at 04:54

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;

ngen · Answer 3 · 2011-06-10T19:28:11.053

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>

edited Jun 10 '11 at 19:28

answered Jun 10 '11 at 19:10

ngen

8,816
2
18
15

score 1 · Answer 4 · answered Jun 10 '11 at 18:53

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.

score 0 · Answer 5 · answered Jun 10 '11 at 18:39

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.

the li items will be dynamic in number.So cant hardcode like 20 %. — Shyju, Jun 10 '11 at 18:41

HTML List element : Sharing the parent width into equal parts

5 Answers5

Linked

Related