HTML列表元素：将父宽度共享为相等部分

Question

我有一个父项<ol>和<li>项中的一对。

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

有什么办法我的列表项可被安排的方式为在那里将平分父宽度（800像素），并且每个项目都会有宽度的一样多吗？即每个<li>将需要200px宽度。

我不想硬编码值。有没有什么风格属性可以做到这一点？

我不想hardocode如20％或东西的宽度，因为列表项是动态added.it可能是4或5或6有时

Answer 1

试试这个：http://jsfiddle.net/QzYAr/

• 详情上display: table-cell：Is there a disadvantage of using `display:table-cell`on divs?
• table-layout: fixed ensures等于宽度li元件。

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 2

请注意：楼主编辑他们的问题在发布此答案后排除百分比。

是的，你只需要计算出每个使用的百分比。在这种情况下，20％。

此外，您的HTML有一些小问题（缺少报价和width=而不是正确的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> 

---

更新：

虽然你可以逃脱不使用百分比限定像素，没有与块元素没有办法脱身没有定义任何宽度值（和宽度值仅作为单位或百分比有效）。

不是我建议你使用表格，而是表格单元格是HTML中唯一类似于你所要求的行为的元素。

Answer 3

正如Renesis指出的那样，我认为表格单元格是唯一的选择，除非您正在编写脚本。尽管您可以在CSS中使用表格单元格。

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

..这将模拟行为。请注意，在IE中，它将像往常一样在较低版本中导致问题。

Answer 4

我认为这是你要求的。但它需要jQuery。

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> 

Answer 5

这里是简约的设计。它会产生一个响应等距离细胞

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

神奇的是width:1%; position:relative; display:table-cell;