问题描述：

我正在构建一个无序列表中有一个下拉无序列表的导航。我想使列表项目至少与“head”列表项目一样宽，以便下拉菜单看起来正确。现在，由于订单项的字符数比包含无序列表的订单项少，因此下拉菜单更细。是否有可能使一个元素的宽度与另一个元素的宽度相同？

我想下订单的服用点：

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

是否有可能做到这一点没有JavaScript和刚刚独自内的CSS？

答

是的。从技术上讲，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%; 
}

虽然这允许您设置子菜单是与父母宽度相同，它带有使菜单项目换行的副作用（请参阅sui generis菜单）。为了克服这个问题，可以使用下面的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; 
}

谢谢，但我试过。发生了什么事是，下拉菜单列表项变得太宽 - 延伸到屏幕的最右侧。这是因为它们被设置为可能显示为块吗？ – 2012-01-11 21:24:41

我将不得不看到更多的代码才能更好地回答这个问题。首先，将其缩小到最低限度的代码量（例如，去除页眉，页脚和其他不属于菜单的任何其他内容），然后将其发布到您的问题中，或发布到诸如www.jsfiddle 。净。一旦你这样做，让我知道，我会更新我的答案，以反映你的变化。 – 0b10011 2012-01-11 21:29:49

确定完成 - http://jsfiddle.net/fBJ7W/ 感谢您的反馈和帮助。这是主要清单中最后一个项目（回收木材）的下拉菜单。请注意下拉范围如何变窄 – 2012-01-11 21:36:02

答

width:100%

，应该使孩子一样宽父:)

答

试试这个。

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

这导致下拉菜单变得过宽，看上面的评论 - 或许是由于显示块？ – 2012-01-11 21:26:28

然后，如果您发布完整的下拉代码，我们就可以看到实际发生的情况，这可能会有所帮助。 – 2012-01-11 22:31:45

是否有可能使一个元素的宽度与另一个元素的宽度相同？

更新

相关推荐