阻止<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>显示为内联,为什么内部元素<a>会影响它？

Answer 1

发生这种情况是因为包含块级元素的内联元素被子块拆分为块级.这是w3规范的引用:

当内联框包含一个流内块级别框时,内嵌框(及其同一行框内的内联祖先)在块级框(以及任何连续或仅由其分隔的块级兄弟)中被打破.可折叠的空白和/或流出元素),将内联框分成两个框(即使任一边是空的),块级框的每一边一个.中断前和中断后的行框都包含在匿名块框中,块级框成为这些匿名框的兄弟.

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

如果你看看这个链接,你会看到他们的"匿名盒"是后跟一个块级元素的块内包装嵌入式文本的图(在他们的情况下,<p>).因此,为了进一步解释,在上面的引用中,基本上他们说的是内联框父项被子程序分割成块级别框,其上显示:block.

那有意义吗？

为了使其正常工作,您可以将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>