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

この動作の詳細については、こちらとこちらの回答を参照してください

于 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 に答える