我有一个父母<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），并且每个项目将具有相同的宽度？ IE。每个<li>宽度为 200px。
我不想对值进行硬编码。有没有任何样式属性可以做到这一点？
我不想对宽度进行硬编码，例如 20% 或其他内容，因为列表项是动态添加的。有时可能是 4、5 或 6
尝试这个：http://jsfiddle.net/QzYAr/ http://jsfiddle.net/QzYAr/
- 有关详细信息
display: table-cell: 在 div 上使用“display:table-cell”有缺点吗？ https://stackoverflow.com/questions/6307934/is-there-a-disadvantage-of-using-displaytable-cellon-divs/6307988#6307988
-
table-layout: fixed ensures http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout等宽
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
