标签内容转到新行

Question

这是一个Jsfiddle http://jsfiddle.net/67QR8/

我有一个ul等级main_menu，在其中一个li中，我有一个ul等级sub_menu

a中的main_menu标记展开以适合a内容，但a中的sub_menu标记不会。

为什么请？

我尝试了什么

我在sub_menu这样的

中添加了200px的宽度

.header ul.sub_menu li{
    position: relative;
    display: inline-block;
    width: 200px;
}

并且它有效，但在我看来，这只是一种解决方法而不是解决方案。我想知道为什么会发生这种情况以及如何在不设置特定宽度的情况下解决这个问题。因为它适用于第一个a代码，因此它应该在第二个a代码中使用。

非常感谢

更新1

我已将背景设为红色，以便向您显示我正在考虑的ul

Answer 1

首先，问题的解决方案是将以下设置添加到CSS。正如我之前的评论中所提到的，这指示浏览器默认情况下不会回滚。

.header ul.sub_menu li a{ 
    white-space: nowrap;
}

注意：不需要将其添加到ul.main_menu li a，因为它会应用于li下main_menu下的所有锚标记包括主菜单的项目（由于我们没有使用>，因此它将适用于子菜单li a，它们也不是main_menu的直接子项。）

关于为什么sub_menu中的a标记在main_menu中的标记没有被包围的问题，这是因为子菜单的li标记是一个绝对定位元素的孩子。查看this thread以获取有关该主题的精美解释。

  

摘录：   元素在从文档流中移除之前获取其宽度和高度。当你绝对定位外部元素时，它会从流中移除，因为它没有直接内容，它的宽度为0，高度为0.因此，其中另一个试图添加文本的分割元素继承了父元素。宽度为0.因此，它只会扩展到允许内容的最长字的宽度，然后将其他所有内容分解为新行。完成后，它会将文档流中的元素自行删除。

在与此问题相关的代码中，元素采用＆＃34;函数＆＃34;的宽度。或＆＃34;地点＆＃34;作为最大宽度（两者几乎相同的宽度）并缠绕在一起。