HTML列表元素：将父宽度共享为相等的部分 [英] HTML List element : Sharing the parent width into equal parts

问题描述

我有一个父项< ol> 以及< li> p>

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>

有没有办法我的列表项可以排列方式， （800px），每个项目将有相同的宽度？也就是说每个< li> 将占用200像素的宽度。

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?

我不想硬编码宽度像20％或某事，因为列表项是动态添加。可以是4或5或6

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

推荐答案

尝试以下操作： http ：//jsfiddle.net/QzYAr/

• 有关 display的详细信息：table-cell ：是否有使用`display：table-cell`on divs？的缺点？


• table-layout：fixed 确保等宽度 li 元素。 / li>
  

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

这篇关于HTML列表元素：将父宽度共享为相等的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！