HTML背景顏色

我有問題通過設置「導航欄」背景顏色。一切都很好，但後來我添加了這些線，它開始不能正常工作：HTML背景顏色

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
}

即使然後我設置背景色它不工作。你在下面看到。我將背景色設置爲黑色，但仍然是白色。我不明白爲什麼。

#nav { 
    background-color: #222; 
}

這是我所有的HTML代碼：

<html> 
    <head> 
     <title>Fero Estetra</title> 
     <link type="text/css" rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 

     <div id="nav"> 
      <div id="nav_wrapper"> 
       <ul class="pull-left"> 
        <li><a href="#">Home</a></li><li> 
        <a href="#">About us</a></li><li> 
        <a href="#">Contact</a></li><li> 
        <a href="#">Social<img id="img1" src="nuotraukos/arrow.png" /></a> 
         <ul> 
          <li><a href="http://www.youtube.com/">Youtube</a></li> 
          <li><a href="#">Twitter</a></li> 
          <li><a href="#">Facebook</a></li> 
         </ul> 
        </li> 
       </ul> 

       <ul class="pull-right"> 
        <li><a href="#">Register</a></li><li> 
        <a href="#">Login</a></li> 
       </ul> 

      </div> 
     </div> 

    </body> 
</html>

這是我所有的CSS代碼：

body { 
    padding: 0; 
    margin: 0; 
    overflow-y: scroll; 
    font-family: Arial; 
    font-size: 18px; 
} 

#nav { 
    background-color: #222; 
} 

#nav_wrapper { 
    width: 960px; 
    margin: 0 auto; 
} 

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
} 

#nav ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
} 

#nav ul li { 
    display: inline-block; 
} 

#nav ul li:hover { 
    background-color: #333; 
} 

#nav ul li img { 
    vertical-align: middle; 
    padding-left: 5px; 
    transform: rotate(90deg); 
    margin-top: -5px; 
} 

#nav ul li a,visited { 
    color: #ccc; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 

#nav ul li a:hover { 
    color: #ccc; 
    text-decoration: none; 
} 

#nav ul li:hover ul { 
    display: block; 
} 

#nav ul ul { 
    display: none; 
    position: absolute; 
    background-color: #333; 
    border: 5px solid #222; 
    border-top: 0; 
    margin-left: -5px; 
    min-width: 200px; 
} 

#nav ul ul li { 
    display: block; 
} 

#nav ul ul li a,visited { 
    color: #ccc; 
} 

#nav ul ul li a:hover { 
    color: #099; 
}

來源

2014-10-29 Povilas Magahaka

您需要清除浮動。嘗試將'overflow：hidden'添加到'＃nav'或使用網格系統中使用的任何clearfix。 – 2014-10-29 12:34:14

你可以試試這個[clear float]（http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increas） – 2014-10-29 12:35:54

沒錯問題原因因爲float'sCheck this FIDDLE你需要清除浮動在父元素被關閉之前父元素具有浮動元素

這裏

#nav:after{ 
    clear:both; 
}

更多信息Read this source。爲瀏覽器兼容性問題使用clearfix黑客

來源

2014-10-29 12:35:00

回答

相關問題