Question

我正在创建一个水平列表。这是我的html：

<ul class="deals">
    <li>test</li>
    <li>fads</li>
    <li>asdf</li>
</ul>

这是css：

ul.deals {
  list-style-type: none;
}
ul.deals li {
  display: inline;
  padding: 10px 20px;
}

如果我在列表中添加div，则它不会再水平显示。这是新的html：

<ul class="deals">
    <li>
        <div>test</div>
    </li>
    <li>
        <div>fads</div>
    </li>
    <li>
        <div>asdf</div>
    </li>
</ul>

div改变输出怎么样？另外，我该如何解决这个问题？

Answer 1

如前所述，div是块级元素。

你想通过嵌套div来实现什么？如果您不需要维度容器，请使用<span>，而不是使用<div>样式display: inline。原因：跨度本质上是内联的，不需要额外的css来实现它们。

如果您想要保留水平结构的尺寸容器，只要分配<span>

，就可以使用<div>或display: inline-block

更好的是，使用display: inline-block设置列表项的样式。这样你就不需要嵌套的DOM元素了。

Answer 2

正如gillesc所说，DIV标签是块级别的。在你的css中尝试以下可疑代码

ul.deals div {display: inline}

您可以使用内联块代替

为什么我的列表在添加div时会停止水平显示？

2 个答案: