本文介绍了阻止&；lt；A&；gt；内联&；lt；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>这篇关于阻止&；lt；A&；gt；内联&；lt；li&；行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！