未渲​​染的ul / div元素的背景颜色

Question

我正在尝试在蓝色色带中显示导航项目（水平）。不知何故，background-color属性没有应用于ul元素。我试图将它放在div元素中，背景为蓝色。不过，它不起作用

Html片段为，

<div style="background-color:blue;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>

Answer 1

您正在为float元素使用li属性，因此您需要对容器应用某种clearfix，以根据内容大小调整其大小。您可以尝试使用overflow CSS属性：

body > div { overflow: auto}

JSFiddle

Answer 2

Why is my background color not showing if I have display: inline?

这是与此相同的问题。 div在高度0处出现，与列表相同，因为浮动不会占用任何空间。

如果您指定高度或告诉他们display:inline-block它将会工作。

小提琴：http://jsfiddle.net/7vp4vz6f/

Answer 3

<div style="background-color: blue; overflow: hidden;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>

Answer 4

你的元素没有宽度和高度，这就是原因。 另外，考虑使用样式表，其中一个优点是您不会经常遇到此类问题。