我正在尝试使用<span> 表示的元素创建一个水平菜单。菜单本身（父级<div>）具有固定宽度，但元素编号始终不同。
我希望拥有相同宽度的子 <span>，与它们的数量无关。
到目前为止我所做的：为每个跨度添加一个float: left; 样式并指定其百分比宽度（百分比或多或少很好，因为服务器在页面生成时知道，有多少菜单项那里可以除以这个数字 100%）。这有效，除了我们有除法余数的情况（比如 3 个元素），在这种情况下，我在父 <div> 的右侧有一个像素孔，如果我将百分比向上取整，最后一个菜单元素被包装。我也不太喜欢动态生成样式，但如果没有其他解决方案，那也没关系。
我还能尝试什么？
这似乎是一个非常常见的问题，但谷歌搜索“相同宽度的子元素”并没有帮助。
【问题讨论】：
您可以尝试使用固定表格布局的表格。它应该在不考虑单元格内容的情况下计算列宽。
table.ClassName {
table-layout: fixed
}
【讨论】：
如果您有一个固定宽度的容器，那么您将失去一些百分比宽度子跨度的有效性。
对于 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; }
【讨论】：
您是否尝试过十进制值，例如将宽度设置为 33.33%？
根据 CSS 语法中的规定，宽度属性 (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) 可以指定为
正如在数字定义（http://www.w3.org/TR/CSS21/syndata.html#value-def-number）中所说，有些值类型必须是整数，并表示为
这将取决于浏览器解决这种情况的能力，如果它不能将父框除以 3 而不剩余，它会绘制 1 或 2 像素的空间，还是使 1 或 2 个跨度更宽比其他人。
【讨论】：
关于 Xian 的回答，还有 :first-child 伪元素。你应该有这个，而不是第一个班级。
span:first-child {
width: auto;
}
显然，这仅适用于单行菜单。
【讨论】：