具有相同宽度的子跨度

Question

我正在尝试创建一个水平菜单，其元素由 <span>的。菜单本身（父菜单 <div>) 具有固定的宽度，但元素数量始终不同。

我想要孩子 <span>具有相同的宽度，与它们的数量无关。

到目前为止我所做的：添加了一个 float: left; 每个跨度的样式并指定其百分比宽度（百分比或多或少都可以，因为服务器在生成页面时知道有多少菜单项，并且可以将 100% 除以该数字）。这是可行的，除了我们有除法余数的情况（例如 3 个元素），在这种情况下，我在父项的右侧有一个一像素的孔 <div>, ，如果我将百分比向上舍入，则最后一个菜单元素将被包裹。我也不太喜欢动态生成样式，但如果没有其他解决方案，也没关系。

我还能尝试什么？

这似乎是一个非常常见的问题，但是谷歌搜索“相同宽度的子元素”并没有帮助。

Answer 1

您可以尝试使用固定表格布局的表格。它应该计算列宽，而不关心单元格内容。

table.ClassName {
    table-layout: fixed
}

Answer 2

如果您有一个固定宽度的容器，那么您将失去百分比宽度子跨度的一些有效性。

对于 33% 的情况，您可以向第一个和每第四个子跨度添加一个类，以根据需要设置正确的宽度。

<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>

在哪里

.first-in-row { width:auto; /* or */ width:XXX px; }

Answer 3

您是否尝试过小数值，例如将宽度设置为 33.33%？

正如 CSS 语法中所指定的，宽度属性 (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) 可以表示为 <百分比> (http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage)，它被声明为一个<number>。

正如数字定义中所述（http://www.w3.org/TR/CSS21/syndata.html#value-def-number），有一些值类型必须是整数，用<integer>表示，另一些是实数，用<number>表示。百分比定义为 <number>，而不是 <integer>，因此它可能有效。

这将取决于浏览器解决这种情况的能力，如果它不能将父框除以 3 而没有剩余，它是否会绘制 1 或 2 像素空间，或者使 3 个跨度中的 1 个或 2 个跨度比其余的宽。

Answer 4

参考 Xian 的答案，还有 :first-child 伪元素。你不会拥有第一排的班级，而是拥有这个。

span:first-child {
    width: auto;
}

显然，这仅适用于单行菜单。