css - 我如何使用 min-width 100% 并仍然按内容扩展？

Question

我有一个很好的菜单栏，但我希望下拉菜单的最小宽度为其上方链接项的 100%。用图片更容易说明:

这很好:

但我希望这个至少 100% 宽:

我不希望它们正好是 100% 宽。我知道如何做到这一点，但很长一段时间以来，我一直在努力让它们都至少 100% 宽，但我想不通。

我正在处理的 css 的主要部分是 #menu > ul > li > ul。我试过对其应用 min-width: 100%，但它们都恰好变成了 100%。为什么这行不通？

Here's a fiddle显示我的问题的现场演示，它包括菜单的所有 css。

Answer 1

这只需要进行一些小的调整。

首先，定位你的 li 相对位置，使它们明确成为子级别 ul 的 anchor (这是必要的，以便 ul 可以从他们的 parent 那里得到他们的最小宽度):

#menu > ul > li {
    position:relative;
}

其次，将 ul 放在它们的父级 li 的左侧，并给它们一个 min-width:

#menu > ul > li > ul {
  left:0;
  min-width:100%;
}

如果元素的宽度不够，禁止子级别 ul 中的 a 元素断开，通过使用 white-space属性:

#menu > ul > li > ul > li > a {
    white-space:pre;
}

http://jsfiddle.net/jLLJu/4/ (为了清晰起见，我将我的修改添加到您的 CSS 底部；您可以随意将它们移至相关元素的其余格式所在的位置。)