CSS：如何制作一个水平（UL）列表，使每个项目保持统一的宽度？答案

【问题标题】：CSS: How do I make a horizontal (UL) list keeping each item at a uniform width?CSS：如何制作一个水平（UL）列表，使每个项目保持统一的宽度？
【发布时间】：2013-09-02 16:31:18
【问题描述】：

也就是说，没有为每个单独的项目定义特定的“宽度”量。例如，最宽的元素（按其内容）设置其他每个元素的宽度。

此外，我如何在其容器中 100% 跨越所述列表，同时保持每个项目的宽度相同？

【问题讨论】：

我不认为你可以做到这一点没有定义一个宽度。
没有为每个项定义特定宽度。 :)
哦，好吧，我会尝试使用宽度。无论如何，谢谢。

标签： css list width

【解决方案1】：

如果我理解正确：

您需要一份清单。
您希望每个列表项的宽度相同。
您希望该宽度是最宽列表项内容的宽度
您还需要一种在容器中均匀分布列表项的方法，这似乎与 3 不兼容，因为那样它们将不会按内容均匀间隔，而是按容器大小。

所以我假设您需要两种不同的解决方案。

我觉得你可以的

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

适用于某些浏览器。我似乎记得它不能在 IE 中工作，并且必须使用 css 表达式使其工作。

这个想法是浮动 ul 和 li 以将它们缩小到它们的内容宽度。 li 被清除并设置为其容器宽度的 100%，即缩小到其大小的同一容器。

除非您知道列表项的数量，否则您的其他选择在 CSS 中是不可能的。虽然如果您不知道列表项的数量，则意味着服务器端或客户端都有脚本，您可以找出项目的数量。 :)

我过去通过给 ul 一个包含子级数量的类，并使用大量 CSS 规则并希望能坚持下去，解决了这个问题。

例如

<style>
  ul.lis1 li {width:100%}
  ul.lis2 li {width:50%}
  ul.lis3 li {width:33.3%}
  ul.lis4 li {width:25%}
  /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul class="lis4"> <!-- lis4 is generated by PHP or Ruby or whatever -->
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

【讨论】：

【解决方案2】：

使用具有固定表格布局的 css 表格。

无论列表中有多少项目，结果将是每个<li> 共享<ul> 的相等部分。

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-cell;
    border-right: 1px solid #c2c2c2;
}

Example FIDDLE

【讨论】：

【解决方案3】：

您需要为此浮动它们：

ul {
  list-style: none;
}

ul li {
  float: left;
  width: 100px; /* Or whatever arbitrary amount you want */
}

列表应该自动跨越容器的宽度 - 它是一个块元素。

【讨论】：