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> 的宽度都是 200 像素。

我不想硬编码该值。有没有样式属性可以实现这一点？

我不想像设置为 20% 这样的硬编码宽度，因为列表项是动态添加的，有时可能是 4、5 或 6 个。

- Shyju

---

style=width=800px;display:block;float:left;' <-- 你可能需要修复它 - kei

Answer 1

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

• 有关display: table-cell的详细信息：使用 `display:table-cell` 在 div 上是否存在缺点？
• 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>

- thirtydot

---

也许对其他人有用：table-layout: fixed; 只有在设置宽度后才能为我工作，例如 width: 100%。上面的帖子包含一个宽度，但我只想强调这是使其正常工作的必要条件。 - exchange

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>

- ngen

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;

- Dennis Flagg

Answer 4

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

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

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

- joakimdahlstrom

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>

---

更新：

虽然你可以使用百分比来避免定义像素，但是对于块级元素而言，没有任何方法可以不定义任何宽度值（而且宽度值只能作为单位或百分比有效）。

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

- Nicole

---

li项的数量将是动态的，所以不能像20％那样硬编码。 - Shyju