如何更改背景顏色在另一個DIV內的DIV

Question

我有一個包含兩個菜單的頁面。 div中的第一個內容是一般主題。第二個div是針對特定主題的。我想將特定頂部div的顏色更改爲不同的背景顏色。我似乎無法讓它工作。

CSS：

#navigation { 
    border-top: 2px solid #808080; 
    border-bottom: 2px solid #808080; 
    background-color: yellow; 
    overflow: scroll; 
} 

#NavigationColorGreen { 
    background-color: greenyellow; 
} 

的HTML：

<div id="navigation" > 
    <a href="general-links.htm>General</a>" 
    <hr class="divider"/> 
    //* I want to change the background color of this div to green *// 
    <div id="NavigationColorGreen" > 
    <a href="specific-links.htm">Specifics</a> 
    </div> 
</div> 

Answer 1

您遇到的問題是與浮動li在你的菜單做。當一個元素使用display:float時，它將從頁面流中取出。這意味着你的NavigationColorGreen div沒有直接的內容，沒有任何東西給它的高度，它的高度爲0.

爲了克服這個問題，你需要使用「clearfix」。您將其添加到包含div（NavigationColorGreen，您的情況），它強制它「清除」浮動元素，以便它包含它們。

工作例如：

#navigation li { 
 
\t float: left; 
 
\t padding: 1px 8px 1px 8px; 
 
} 
 

 
#navigation { 
 
border-top: 2px solid #808080; 
 
border-bottom: 2px solid #808080; 
 
background-color: yellow; 
 
} 
 

 
#navigation ul{ 
 
list-style:none; 
 
} 
 

 
#NavigationColorGreen { 
 
background-color: greenyellow; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
/* This is for the example only: */ 
 
p {font-weight:bold; clear:both; padding:10px 0 0;}

<p>Without clearfix</p> 
 
<div id="navigation"> 
 
    <a href="general-links.htm">General</a> 
 
    <div id="NavigationColorGreen"> 
 
     <ul> 
 
      <li><a href="#">Link1</a></li> 
 
      <li><a href="#">Link2</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<p>With clearfix</p> 
 
<div id="navigation"> 
 
    <a href="general-links.htm">General</a> 
 
    <div id="NavigationColorGreen" class="clearfix"> 
 
     <ul> 
 
      <li><a href="#">Link1</a></li> 
 
      <li><a href="#">Link2</a></li> 
 
     </ul> 
 
    </div> 
 
</div>