是否有可能使一个元素的宽度与另一个没有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的{​​{1}}值设置为position。这将它从它的父级（关于处理absolute）中取出，但可以修复，并将以下CSS添加到现有的CSS中：

width

虽然这允许您将子菜单设置为与父菜单相同的宽度，但它带有使菜单项换行的副作用（请参阅ul li { position:relative; } ul li ul { width:100%; } 菜单）。要解决此问题，请使用以下CSS（除了jsFiddle）：

sui generis

Answer 2

width:100%

应该让孩子和父母一样宽：）

Answer 3

试试这个。

ul li, ul li ul {
  width:100px;
}