Question

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

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

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

Answer 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; }的相等部分，无论列表中有多少项。

{{1}}

<强> Example FIDDLE

Answer 3

你需要为此浮动它们：

ul {
  list-style: none;
}

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

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

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

3 个答案: