html - 未呈现 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

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

这是同一个问题。 div 在高度 0 处出现，与列表相同，因为 float 不占用任何空间。

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

fiddle :http://jsfiddle.net/7vp4vz6f/