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

fiddle

why in this example div is not visible? How can i add box with background-color in list?

4

4 回答 4

1

Because it is empty. It becomes visible if you add some text inside.

<ul>
    <li><div style="background-color: red; width: 10px; height: 10px; display: inline">test</div>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
于 2012-07-30T08:24:36.383 回答
1

display: inline will not display unless it contains some kind of contents. You'd need to either

display: inline-block; or 

<div style="background-color: red; width: 10px; height: 10px; display: inline">&nbsp;</div>
于 2012-07-30T08:26:04.260 回答
1

First of all there's no text in your <div> so you should do it like this :

You need to place the word aaa between your <div> tags

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

moreover you don't need any display: inline; property here you can simply do it like this :

My fiddle

And if you need all the <li> elements inline than you need to give display: inline; to your <li> and display: inline-block; to your <div> element also like this : My fiddle

于 2012-07-30T08:33:42.277 回答
0

According to the W3C validator div inside list is perfectly fine. You have to give some text in div. So that you can view the div.

于 2012-07-30T08:29:57.117 回答