Question

<ul>
    <li><div style="background-color: red; width: 10px; height: 10px; display: inline"></div>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

fiddle

为什么在这个例子中div不可见？如何在列表中添加带背景颜色的框？

Answer 1

因为它是空的。如果你在里面添加一些文字，它就会变得可见。

<ul>
    <li><div style="background-color: red; width: 10px; height: 10px; display: inline">test</div>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

Answer 2

display: inline除非包含某种内容，否则不会显示。你需要

display: inline-block;或

<div style="background-color: red; width: 10px; height: 10px; display: inline">&nbsp;</div>

Answer 3

首先，<div>中没有文字，所以你应该这样做：

您需要在aaa代码

之间添加<div>字样

<li><div style="background-color: red; width: 10px; height: 10px; display: inline">aaa</div></li>

此外，您不需要任何display: inline;属性，您可以这样做：

My fiddle

如果您需要内联的所有<li>元素，而不是display: inline; <li> display: inline-block;和<div> {{1}}元素。：My fiddle

Answer 4

根据W3C验证器div内部列表完全没问题。你必须在div中给出一些文字。这样你就可以查看div了。

添加div框以列出li

4 个答案: