a标签内容转到新行 [英] the a tag content goes to a new line

问题描述

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

This is a Jsfiddle http://jsfiddle.net/67QR8/

我有一个ul类 main_menu 并且在它的 li ，我有一个ul类 sub_menu

I have a ul class main_menu and in one of its li, I have a ul class sub_menu

a 标记在 main_menu 展开以适应 a 内容，但 a

the a tag in the main_menu expand to fit the a content, but the a tag in the sub_menu doesn't.

为什么？

我在 sub_menu 中添加了宽度为200px

I added width 200px to the li in the sub_menu like this

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

它可以工作，但是，在我看来，只是一个解决方法比解决方案。我想知道为什么是这种情况，如何解决这个问题，而不设置一个特定的宽度。因为它在第一个 a 标签中工作，所以它应该在第二个 a 标签中工作。

and it works, but that is, in my opinion, just a workaround rather than a solution. I would like to know why is that happening and how to fix that without setting a specific width. because it works in the first a tag so it should work in the second a tag.

非常感谢。

只是为了告诉你 ul 我在考虑

I've made the background red just in order to show you which ul i am taking about

推荐答案

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

First, solution to the problem is to add the below setting to the CSS. As mentioned in my earlier comment, this instructs the browser not to wrap around by default.

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

注意：不需要添加到 ul.main_menu li a ，因为它将应用于 li code> main_menu 包括主菜单项（由于我们不使用> ，它将应用于子菜单的 li a 它们不是main_menu的直接子节点。）

Note: It is not required to be added to ul.main_menu li a because it would then apply to all anchor tags that are present within an li under the main_menu including the main menu's items (and since we are not using > it would apply to the sub menu's li a which are not direct children of main_menu also).

关于为什么在sub_menu中的一个标签被包装，而main_menu中的标签没有，这是因为子菜单的 li 绝对定位的元素。请查看 此主题 ，以获得有关该主题的详细解释。

Coming to the question on why the a tag within the sub_menu is getting wrapped around while the one in main_menu doesn't, it is because of the submenu's li tag being the child of an absolutely positioned element. Check out this thread for a beautiful explanation on the topic.

提取：
元素在从文档流中移除之前获得其宽度和高度。当绝对地定位外部元素时，它将从流中移除，并且因为它没有直接内容，所以它的宽度为0，高度为0.因此，其中的另一个分区元素尝试添加文本时继承父元素的宽度为0因此，它只会扩展到最长词的宽度，以允许内容，然后将其他所有东西打破新线。完成后，它从要自行关闭的文档流中删除元素。

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.

这个问题，这里元素的宽度函数或位置作为最大宽度（两者几乎相同的宽度），并围绕。

In the code relating to this question, here the element took the width of "Functions" or "Locations" as the maximum width (both almost same width) and got wrapped around.

这篇关于a标签内容转到新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！