Question

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

假设：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

这是因为包含块级元素的内联元素被子块拆分为块级。这是w3规范的引用：

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

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

如果您查看该链接，您会看到他们的＃34;匿名框＆＃34;在一个块中包含内联文本，后面跟着一个块级元素（在他们的例子中是<p>）。因此，为了进一步解释，在上面的引用中，基本上他们会说内联框父项被子项分割成块级别框，其上显示：block。

这有意义吗？

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

阻止<a> inside inline <li> behaviour</li></a>

1 个答案: