0

enter code here我有以下html/php：

<div class="footerbottom">
<span class="footermenuitem">
<span class="footermenutitle">PRODUCTS</span>
<?php $menu = menu_navigation_links('menu-products');
print theme('links__menu_products', array('links' => $menu)); ?>
</span>

<span class="footermenuitem">
<span class="footermenutitle">APPLICATIONS</span>
<?php $menu = menu_navigation_links('menu-applications');
print theme('links__menu_applications', array('links' => $menu)); ?>
</span>

<span class="footermenuitem">
<span class="footermenutitle">BRANDS</span>
<?php $menu = menu_navigation_links('menu-brands');
print theme('links__menu_brands', array('links' => $menu)); ?>
</span>

</div>

以及以下 CSS：

.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
z-index: 3;
margin-top: 200px;
}
.footerbottom ul {
list-style: none;
}
.footerbottom li a {
color: #cccccc;
}
.footerbottom li a:link {
color: #cccccc;
}
.footerbottom li a:visited {
color: #cccccc;
}
.footerbottom li a:hover {
color: #cccccc;
}
.footerbottom li a:active {
color: #cccccc;
}
.footermenutitle {
font-size: large;
color: #fdbe6e;
}
.footermenuitem {
float: right;
margin-right: 20px;
}

由于某种原因，所有这个区域的背景都不是灰色的。这是为什么？我该如何解决？

4

2 回答 2

3

问题是您.footerbottom包含浮动元素，因此您需要清除它们，声明overflow: hidden;属性footerbottom

.footerbottom {
   background-color: #2b2b2b;
   color: #cccccc;
   width: 100%;
   z-index: 3;
   margin-top: 200px;
   overflow: hidden;
}

演示

好吧，这是一个快速修复，但也好不到哪里去，如果您不希望支持较旧的 IE 版本，如果您愿意，可以在父元素上使用 clearfix 类来自行清除它。

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

<div class="footerbottom clear">
   <!-- ... Other code -->
</div>

演示 2

有关此行为的更多信息，请参阅我的答案here和here

于 2013-10-23T05:36:43.840 回答
1

将高度添加到：

.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
height: 200px
z-index: 3;
margin-top: 200px;
}
于 2013-10-23T05:37:00.347 回答