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>

有没有什么方法可以安排我的列表项目,它将平均划分父宽度(800px),每个项目将具有相同的宽度？即每个<li>将采用200px宽度.

我不想硬编码这个值.是否有任何样式属性可以做到这一点？

我不想将宽度硬编码为20%或者其他东西,因为列表项是动态添加的.有时可能是4或5或6

Answer 1

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

• 有关详细信息display: table-cell:使用`display:table-cell`on divs是否有缺点？
• table-layout: fixed确保宽度相等的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>