Question

看看这个

我的#header上的颜色怎么会不适用？

Answer 1

给它一个高度或隐藏溢出它会。在这种情况下都可以使用。

#header{
  background:#2b2b2b;
  color:#fff;
  width:100%;
  height:200px; /* overrides float calculations */
  overflow:hidden; /* clears floats */
}

http://jsfiddle.net/AlienWebguy/esTzk/1/

Answer 2

给你的标题一个高度，因为你不希望它大于某个值：

#header{
  background-color:#2b2b2b;
  color:#fff
  width:100%;
  height:20px;
}

更好的解决方案是在标题内清除div。

<div id="header">
  <ul id="nav">
    <li>Service Provider
      <ul>
        <li>Vendor / Manufacturer</li>
        <li>Service Type</li>
        <li>Service Technician</li>
      </ul>
      <div style="clear:both"></div>
    </li>
    <li>Cities & Stations
      <ul>
        <li>Stations</li>
        <li>Station Owner</li>
      </ul>
      <div style="clear:both"></div>
    </li>
    <li>Firefighter</li>
    <li>PPE Management</li>
    <li>Care & Maintenance</li>
    <li><a href="index.php?logout=yes">Logout</a></li>
  </ul>
  <div style="clear:both"></div>
</div>

Answer 3

只是为了你的知识添加，这是因为浮动：左边的#nav li选择器。因为#header div中的元素是浮动的，所以#header div设置为height = 0。这就是为什么它在为它指定高度或清除浮动之前不会显示背景颜色。

下拉菜单中的背景颜色问题

3 个答案: