我正在尝试创建一个水平菜单,其元素由 <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-percentage),它被声明为一个<number>。

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

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

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

span:first-child {
    width: auto;
}

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

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top