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 {
	float: left;
	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>

如何在另一个DIV内部的DIV中更改背景颜色

1 个答案: