格框添加到列表裏

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

爲什麼在這個例子格是不可見的？我如何添加列表中的背景顏色框？

Answer 1

display: inline將不會顯示，除非它包含某種內容。你需要要麼

display: inline-block;或

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

Answer 2

因爲它是空的。如果你在裏面添加一些文本，它就變得可見。

<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 3

據內部列表W3C驗證DIV是完全正常的。你必須在div中提供一些文本。這樣你可以查看div。

Answer 4

首先出現在你的<div>沒有文字，所以你應該做的是這樣的：

您需要將您的<div>標記之間的字aaa

<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>元素也是這樣：My fiddle