在CSS中设置但未在HTML中显示的图像

由于某些原因，我为图像设置的类没有显示我设置的图像，但是如果我执行

，我已经计算出来。book li，a.foo

我可以让它们显示一组类的5个图像

我怎样才能让我的课程显示每个单独的图像

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>

.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;
}   

标记本质上是内联元素，因此如果不在前景中添加某种内容/文本，它们通常不愿意添加背景图像

尝试添加

显示：块到您的
.book li a
元素

您还可以通过将
高度
和
宽度
属性添加到通用（非基于id的）
中来合并它们

.book li a {
  display: block
  height: 70px;
  width: 70px;
}

然后您只需指定id的背景
给
的
浮动：左

像这样

.book li a{
float:left;
}

---------
或

.book li a{
display:inline-block;
vertical-align:top;
}

设置一个“块级别”元素并将其向左浮动

a {
   display:block;
   float:left;
  }

你能分享你的html吗？@kalpeshpatel done我需要更改它使其可点击。你想发生什么以及发生了什么还不完全清楚。你能编辑问题的第一行来澄清吗？