html - a 标签内容换行

Question

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

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

main_menu 中的 a 标签展开以适应 a 内容，但是 a 标签在sub_menu 没有。

为什么？

我尝试过的

我像这样在 sub_menu 的 li 中添加了宽度 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 中存在的所有 anchor 标记 在 main_menu 下，包括主菜单的元素(并且由于我们没有使用 >，它将应用于子菜单的 li a它们也不是 main_menu 的直接子代)。

关于为什么 sub_menu 中的 a 标签被环绕而 main_menu 中的标签没有环绕的问题，这是因为子菜单的 li 标签作为绝对定位元素的 child 。查看this thread以获得关于该主题的精彩解释。

Extract: The element gets its width and height before it gets removed from the flow of the document. When you position the outside element absolutely, it gets removed from the flow and since it has no immediate content, it has a width of 0 and height of 0. Therefore, another division element inside it attempting to add text inherits the parent's width of 0. So it's only going to expand to the width of the longest word to allow for content, and then break everything else to new lines. After it's done that, it removes the element from the flow of the document to be off on its own.

在这个问题的代码中，这里的元素以“Functions”或“Locations”的宽度为最大宽度(两者几乎相同的宽度)并被包裹起来。