Question

我正在尝试使用<span>代表的元素创建一个水平菜单。菜单本身（父<div>）具有固定的宽度，但元素编号总是不同。

我希望孩子<span>具有相同的宽度，与其中有多少无关。

到目前为止我做了什么：为每个跨度添加了float: left;样式并指定了它的百分比宽度（百分比或多或少都很好，因为服务器在页面生成时知道，有多少菜单物品在那里，可以用这个数字除以100％）。这是有效的，除了我们有一个除法余数的情况（比如3个元素），在这种情况下，我在父<div>的右边有一个像素的洞，如果我将百分比四舍五入，最后一个菜单元素被包装。我也不喜欢动态生成样式，但如果没有其他解决方案，那就没关系。

我还能尝试什么？

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

Answer 1

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

对于33％的情况，您可以在第一个和第4个子跨度中添加一个类，以根据需要设置正确的宽度。

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

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

table.ClassName {
    table-layout: fixed
}

Answer 3

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

如CSS语法中所指定的，width属性（http://www.w3.org/TR/CSS21/visudet.html#the-width-property）可以作为＆lt; percentage＆gt;给出。（http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage），声明为＆lt; number＆gt;。

如数字定义（http://www.w3.org/TR/CSS21/syndata.html#value-def-number）所述，有些值必须是整数，并且表示为＆lt; integer＆gt;，其他值是实数，表示为＆lt; number＆gt;。百分比定义为＆lt; number＆gt;，而不是＆lt; integer＆gt;所以它可能有用。

这取决于浏览器解决这种情况的能力，如果它不能在不保留的情况下将父盒子除以3，它会绘制1或2像素空间，还是从三个更宽的区域中划分出1或2个跨度比其他人。

Answer 4

参考西安的答案，还有：first-child伪元素。你可以拥有这个，而不是拥有第一行的课程。

span:first-child {
    width: auto;
}

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

儿童跨度相同的宽度

4 个答案: