阻止&amp；lt；A&amp；gt；内联&amp；lt；li&amp；行为 [英] block <a> inside inline <li> behaviour

问题描述

下面的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>为什么会影响它？

推荐答案

这是因为包裹在块级元素周围的内联元素被子块拆分成块级。以下是w3规范中的一句话：

当内联框包含流内块级框时，内联框(及其同一行框内的内联祖先)围绕块级框(以及任何连续或仅由可折叠空格和/或流外元素分隔的块级兄弟项)被拆分，将内联框拆分为两个框(即使两边都是空的)，块级框的两边各一个。分隔符之前和之后的行框都包含在匿名块框中，并且块级框将成为这些匿名框的同级框。

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

如果您查看了该链接，您将看到他们的"匿名框"图，该框将内联文本包装在一个块中，后面跟着一个块级元素(在他们的例子中，a<p>)。因此，为了进一步解释，在上面的引述中，他们基本上是说，内联框父级被带有Display：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>

这篇关于阻止&amp；lt；A&amp；gt；内联&amp；lt；li&amp；行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！