阻止 <a> 内联 <li> 行为

Question

以下 HTML / CSS 结果让我感到奇怪和意外，我真的在寻找解析方式背后的逻辑。

假设：

#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>

这导致<li> 垂直堆叠（如块元素），因为<a> 显示为块元素。但我希望 <li> 水平堆叠，因为我已将它们定义为内联元素。

<li> 显示为内联，为什么 inner 元素 <a> 会影响它？

Answer 1

发生这种情况是因为围绕块级元素的内联元素被子块拆分为块级。以下是 w3 规范的引述：

当内联框包含流内块级框时，内联框（及其在同一行框内的内联祖先）在块级框（以及任何连续或连续的块级兄弟姐妹）周围被打断。仅由可折叠的空格和/或流外元素分隔），将内联框分成两个框（即使任一侧为空），一个位于块级框的每一侧。断点前和断点后的行框被封闭在匿名块框内，块级框成为这些匿名框的兄弟。

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

如果您查看该链接，您将看到他们的“匿名框”图，该图将内联文本包装在一个块中，后跟一个块级元素（在他们的例子中，<p>） .因此，为了进一步解释，在上面的引用中，基本上他们是说内联框父级被子级拆分为块级框，并显示：块。

这有意义吗？

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

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

#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>