CSS下拉菜单中的自适应宽度答案

【问题标题】：Adapted width in CSS dropdown menuCSS下拉菜单中的自适应宽度
【发布时间】：2013-06-30 01:02:32
【问题描述】：

我正在制作一个仅使用 CSS 的下拉菜单，但结果并不像我所做的那样容易。到目前为止，我有一个实际的下拉菜单，但宽度是父元素的宽度，对于某些项目来说太小而无法在一行中显示。

我尝试设置手动宽度，但这只会使整个内容不对齐并且不实用，因为菜单项可能会更长。是否有一个宽度适应内容，而不改变父宽度？

所有站点文件都位于此处：http://dev.cuonic.com/bourree/

感谢任何帮助，谢谢:)

【问题讨论】：

标签： html css menu

【解决方案1】：

这是一个不为下拉菜单使用固定宽度的解决方案。

首先，将以下内容添加到下拉列表中的链接的 CSS 中：

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

我还必须将 #menu ul 和 #menu ul li 分别更改为 #menu > ul 和 #menu > ul > li，以便这些 CSS 样式仅适用于第一级菜单项。

这是关于在 CSS 选择器中使用 > 的基本参考。我认为在这个例子中还有其他地方会有所帮助：

【讨论】：

我已经尝试过您的解决方案，它有效，我按照您的建议更改了背景颜色和带有子选择器的选择器，现在是 white-space: nowrap;风格似乎没有任何影响。我已经用更改更新了演示站点：dev.cuonic.com/bourree
看起来您已将其拼写为 white-space: no-wrap。将其更改为 white-space: nowrap（无破折号），您应该一切就绪。

【解决方案2】：

在 firefox/firebug 中玩耍我发现这种组合似乎产生了预期的效果：

#menu ul ul li {
    display: block;
    float: left;
    left: -34px;
    position: relative;
    width: 200px;
}

【讨论】：