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 像素) 平分的方式，并且每个项目的宽度都相同？ IE。每个<li> 的宽度为 200px。

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

我不想硬编码 20% 之类的宽度，因为列表项是动态添加的。有时可能是 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

我认为这就是您所要求的。不过它需要 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 3

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

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

Answer 4

正如 Renesis 所指出的，我认为表格单元格是唯一的选择，除非您正在编写脚本。虽然你可以在 CSS 中使用 table-cell。

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

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

Answer 5

请注意：在我发布此答案后，原始发帖人编辑了他们的问题以排除百分比。

是的，您只需要计算出每个人将使用的百分比。在这种情况下，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>

---

更新：

虽然您可以不使用百分比来定义像素，但如果不定义 any 宽度值（并且宽度值仅作为单位或百分比）。

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