看看这个HTML。我想要div的背景颜色 - ＆＃39; social＆＃39;出现但它没有出现.. :(
我尝试了两种溢出：隐藏和清除：两者......但它们都没有工作..请帮助
@charset "utf-8";
/* CSS Document */
body {
border-top: solid 10px #ff6b39;
padding: 0;
margin: 0;
}
.wrap {
width: 940px;
margin: 0 auto;
}
header {
padding: 0;
margin: 0;
padding-top: .001em;
position: relative;
border-bottom: 2px solid #e5e5e5;
}
header h1 {
background: url(img/sprite.png) no-repeat 0 0;
background-position: 0px -51px;
width: 172px;
height: 25px;
text-indent: -9999px;
float: left;
margin-top: 25px;
}
header h1 a {
width: 172px;
height: 25px;
display: block;
}
header p {
margin-top: 26px;
float: left;
margin-left: 25px;
font-size: 14px;
font-family: "Myriad Pro";
color: rgb(123, 123, 123);
line-height: 1.786;
text-align: left;
}
header nav {
clear: both;
}
header nav ul {
padding: 0;
margin: 0;
position: absolute;
top: 25px;
right: 0;
}
header ul li {
list-style: none;
padding: 0 18px;
float: left;
border-right: 1px solid #e4e4e4;
}
header nav ul li:last-child {
border-right: none;
}
header nav ul li:last-child {
padding-right: 0px;
}
header ul li a {
text-decoration: none;
font-size: 20px;
font-family: "Georgia";
color: rgb(245, 103, 55);
font-style: italic;
line-height: 0.85;
text-align: right;
display: block;
}
.social {
clear: both;
position: relative;
margin: 0;
padding: 0;
background: #e5e5e5;
}
.social h2 {
font-size: 30px;
font-family: "Georgia";
color: rgb(0, 0, 0);
font-style: italic;
line-height: 1.4;
text-align: left;
font-weight: 100;
float: left;
}
.social ul {
padding: 0;
margin: 0;
position: absolute;
top: 25px;
right: 0;
}
.social ul li {
list-style: none;
float: left;
}
.social ul li a {
font: 0/0;
color: transparent;
background-color: transparent;
text-decoration: none;
display: inline-block;
padding-right: 10px;
background: url(img/sprite.png) no-repeat 0 0;
width: 41px;
height: 41px;
}
.social a.facebook {
background-position: 0px 0px;
}
.social a.vimeo {
background-position: -49px 0px;
}
.social a.lastfm {
background-position: -100px 0px;
}
.social a.linkedin {
background-position: -150px 0px;
}
.social a.dribble {
background-position: -200px 0px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mumbo website - PSD to HTML</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<header>
<h1><a href="#">Mumbo logo</a></h1>
<p>Powered by Jeffrey Way Industries</p>
<nav>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<div class="social">
<h2>Take a look at our work to see what we mean</h2>
<ul>
<li><a href="#" class="facebook">facebook</a></li>
<li><a href="#" class="vimeo">vimeo</a></li>
<li><a href="#" class="lastfm">lastfm</a></li>
<li><a href="#" class="linkedin">linkedin</a></li>
<li><a href="#" class="dribble">dribbble</a></li>
</ul>
</div> <!-- end of social -->
<div class="heroimage">
<img src="img/hero-image.png" alt="hero image">
</div>
<div class="maincontent">
<h2>Risus portacon vestibulum posuere</h2>
<p>Cray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p>
<ul class="bullet">
<li><a href="#">Cray sustainable vegan</a></li>
<li><a href="#">Chambray occaecat jean shorts</a></li>
<li><a href="#">Hella selvage</a></li>
<li><a href="#">Over master cleanse</a></li>
</ul>
</div><!-- end of maincontent -->
<div class="blogspots">
<h2>Take a look at our work to see what we mean</h2>
<div id="sixposts">
<div class="post">
<img src="img/thumb1.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb2.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb3.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb4.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb5.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb6.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
</div> <!-- end of sixposts -->
</div><!-- end of blogspots -->
<div class="maincontent">
<h2>Ornare Tristique Adipiscing Dolor</h2>
<p>Cray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p>
<ul class="bullet">
<li><a href="#">Cray sustainable vegan</a></li>
<li><a href="#">Chambray occaecat jean shorts</a></li>
<li><a href="#">Hella selvage</a></li>
<li><a href="#">Over master cleanse</a></li>
</ul>
</div><!-- end of maincontent -->
<footer>
<p>© 2012 All Rights Reserved. Powered by Jeffrey Way Industries</p>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</footer>
</div> <!-- end of warp -->
</body>
</html>
答案 0 :(得分：0)
看起来您已将background-image用于列表项，但它们在您的代码输出中不可见。从float:left移除.social ul li，您就可以看到div的背景颜色。