阻止<A>内联<

block amp;lt;aamp;gt; inside inline amp;lt;liamp;gt; behaviour(阻止amp;lt;Aamp;gt;内联amp;lt;liamp;行为)

本文介绍了阻止<A>内联<li&行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

下面的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;行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:阻止&amp;lt;A&amp;gt;内联&amp;lt;

基础教程推荐