我正在尝试使用由<span>表示的元素创建一个水平菜单。菜单本身(父级<div>`)具有固定的宽度，但元素编号始终不同。

我希望孩子的<< span>`的宽度相同，而不管其中有多少个孩子。

到目前为止，我所做的是：为每个范围添加一个float：left;样式，并指定其百分比宽度(百分比或者多或者少都很好，正如服务器在生成页面时所知道的那样，有多少个菜单项并可以将该数字除以100％)。除我们有除法余数(例如3个元素)的情况外，这是可行的，在这种情况下，我在父元素<div>的右侧有一个像素孔，如果我将百分比四舍五入，最后一个菜单元素被包装。我也不太喜欢即时生成样式，但是如果没有其他解决方案，那就很好。

我还能尝试什么？

看来这是一个非常普遍的问题，但是搜索"相同宽度的子元素"并没有帮助。

解决方案

回答

如果我们有一个固定宽度的容器，那么我们将失去百分比宽度子范围的某些有效性。

对于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; }

回答

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

table.ClassName {
    table-layout: fixed
}

回答

我们是否尝试过十进制值，例如将宽度设置为33.33％？

如CSS语法中所指定，width属性(http://www.w3.org/TR/CSS21/visudet.html#the-width-property)可以指定为<percentage>(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，而不是将其拆分成3，是绘制1或者2像素的空间，还是要使1或者2的跨度大于其余3个，则取决于浏览器解决此问题的能力。

回答

参考西安的答案，还有：first-child伪元素。与其拥有一流的课程，不如拥有它。

span:first-child {
    width: auto;
}

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