html - 是否可以在没有js的情况下使一个元素与另一个元素具有相同的宽度？

Question

我正在构建一个导航，其中有一个无序列表中的下拉无序列表。我想让列表项至少与“head”列表项一样宽，以便下拉菜单看起来正确。现在，下拉菜单变得更薄，因为行元素的字符数比包含无序列表的行元素少。

我想对订单进行一些操作:

ul li ul {
{width: *as wide as ul li*;
}

是否可以在没有 javascript 的情况下仅在 css 中完成此操作？

Answer 1

是的，确实如此。从技术上讲，ul 已经具有相同的宽度，但它似乎不是由于边距和填充而导致的。要更改此设置，请使用此 CSS:

ul li ul {
 width:100%;
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

您可能还需要包含以下 CSS 来更改 li 子项的内边距/边距:

ul li ul > li {
 width:100%;
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

更新

在您的具体示例(在评论中发布)中，问题是您将 ul li ul 的 position 值设置为 absolute 。这会将其从其父级中取出(关于处理 width)，但可以通过将以下 CSS 添加到现有 CSS 来修复:

ul li {
 position:relative;
}
ul li ul {
 width:100%;
}

虽然这允许您将子菜单设置为与父菜单相同的宽度，但它会带来使菜单项换行的副作用(请参阅suigeneris菜单)。要解决这个问题，请使用以下 CSS(除了 jsFiddle 之外):

ul li {
 position:relative;
}
/* Due to 'min-width', this may not be compatible with all browsers */
ul li ul {
 min-width:100%;
 white-space:nowrap;
}