uldiv元素的背景色没有呈现。

Question

我试图在一个蓝色的色带中显示导航项（水平）。不知为何，背景色属性没有应用到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

为什么我的背景色如果有display: inline就不显示了？

这和这个问题是一样的。div出来的高度是0，和列表一样，因为浮动不占用任何空间。

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

Fiddle。http:/jsfiddle.net7vp4vz6f。

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

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