2

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

我想有<span>相同宽度的孩子，与他们中有多少人无关。

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

我还能尝试什么？

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

4

4 回答 4

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; }
于 2008-09-06T13:42:43.777 回答
2

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

table.ClassName {
    table-layout: fixed
}
于 2008-09-06T13:42:53.230 回答
0

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

正如 CSS 语法中所指定的，宽度属性 ( 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 而没有剩余，它会绘制一个 1 或 2 像素的空间，还是使 1 或 2 个跨度比其余的宽.

于 2008-09-06T13:58:37.780 回答
0

关于 Xian 的回答，还有 :first-child 伪元素。而不是拥有第一排课程，你会拥有这个。

span:first-child {
    width: auto;
}

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

于 2008-09-06T14:27:35.510 回答