块< a>内联< li>内部行为 [英] block <a> inside inline <li> behaviour

问题描述

以下HTML/CSS结果让我感到惊讶和意外，我真的在寻找这种解析方式背后的逻辑.

The following HTML / CSS result strikes me as odd and unexpected and I'm really looking for the logic behind the way this is parsed.

假设:

#nav {
  list-style-type-none
}
#nav li {
  display: inline;
}
/* make the LI's stack horizontally */

#nav li a {
  display: block;
  padding: 5px;
}
/* display as block to add padding */

<ul id="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About us</a>
  </li>
</ul>

由于<a>显示为块元素，因此导致<li>垂直堆叠(如块元素).但是我希望将<li>定义为内联元素时水平堆叠.

This results in the <li>'s stacking vertically (like block elements) because of the <a>'s which are displayed as block elements. But I want the <li>'s to be stacked horizontally as I've defined them as inline elements.

<li>显示为嵌入式，为什么 inner 元素<a>影响它?

The <li>'s are displayed as inline, why does the inner element <a> affect it?

推荐答案

之所以会发生这种情况，是因为环绕在块级元素周围的内联元素被子块拆分为块级.以下是w3规范的引文:

This happens because inline elements wrapping around block level elements are split into block level by the child block. Here's a quote from the w3 spec:

当一个内联框包含一个流入的块级框时，该内联框(及其在同一行框内的内联祖先)会在该块级框(以及任何连续或连续的块级同级)周围被打断.仅用可折叠的空白和/或流出元素分隔)，将内联框拆分为两个框(即使任何一侧为空)，在块级框的每一侧各一个.分隔符之前和之后的行框都包含在匿名块框中，而块级框成为这些匿名框的同级.

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes.

http://www.w3.org/TR/CSS2/visuren.html#block -boxes

如果您查看该链接，将会看到他们的匿名框"图，该图将内联文本包装在一个块中，然后是一个块级元素(在本例中为<p>) .因此，为了进一步解释，上面的引用基本上是说，内联框的父级正被带有display:block的子级拆分为块级框.

If you have a look at that link, you'll see their diagram of the "anonymous box" that wraps inline text within a block that is followed by a block-level element (in their case, a <p>). So to try to further explain, in that quote above, basically they're saying that the inline box parent is getting split into block level boxes by the child with the display: block on it.

这有意义吗?

为了使其正常工作，您可以将li设置为display:inline-block

In order to get this to work right, you could set the li to display:inline-block

为方便起见，我复制了您的代码并在下面进行了更改.

For your convenience, I copied your code and made the change below.

#nav {
  list-style-type-none
}
#nav li {
  display: inline-block;
}
/* make the LI's stack horizontally */

#nav li a {
  display: block;
  padding: 5px;
}
/* display as block to add padding */

<ul id="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About us</a>
  </li>
</ul>

这篇关于块< a>内联< li>内部行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！