<分区>
<分区>
出于某种原因，我为我的图像设置的类没有显示我设置的图像但是我已经解决了如果我这样做 .book li, a.foo 我可以得到它们显示一组类的 5 张图像。
我怎样才能让我的类(class)显示每张图片？
HTML:
<div class="book">
<ul>
<li><a class="twitter" href="#"></a></li>
<li><a class="facebook" href="#"></a></li>
<li><a class="flickr" href="#"></a></li>
<li><a class="linkedin" href="#"></a></li>
</ul>
</div>
CSS:
.book ul{
width:250px;
height:70px;
list-style:none;
display:block;
margin:-15px 0 25px 0;
}
.book li{
width:70px;
height:70px;
display:inline-block;
float:left;
margin:0 0 0 -30px;
padding:0 20px 0 0;
}
.book li a.twitter{
background: url(images/twitter.png) no-repeat;
height:70px;
width:70px;
}
.book li a.facebook{
background: url(images/facebook.png) no-repeat;
height:70px;
width:70px;
}
.book li a.flickr{
background: url(images/flickr.png) no-repeat;
height:70px;
width:70px;
}
.book li a.linkedin{
background: url(images/linkedin.png) no-repeat;
height:70px;
width:70px;
}
最佳答案
<a>标签本质上是内联元素，因此它们通常不会在不在前景中添加某种内容/文本的情况下添加背景图像。
尝试添加 display:block;给你的.book li a元素
您还可以合并您的 height和 width通过将属性添加到通用(非基于 ID).book li a也是。
.book li a {
display: block
height: 70px;
width: 70px;
}
然后你只需要为 id 指定背景
关于css - 图像在 CSS 中设置但未显示在 HTML 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13170899/