-1

出于某种原因，我为我的图像设置的类没有显示我设置的图像，但是我已经计算出如果我.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>

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

3 回答 3

1

<a>标签本质上是内联元素，因此它们通常不会友好地添加背景图像而不在前景中添加某种内容/文本。

尝试添加display:block;到您的.book li a元素

您还可以通过将它们添加到泛型（非基于 id）来整合您的height和属性。width.book li a

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

然后你只需要为 id 指定背景

于 2012-11-01T04:30:25.140 回答
1

给float:left你的.book li a

像这样

.book li a{
float:left;
}

---------

或者 

.book li a{
display:inline-block;
vertical-align:top;
}
于 2012-11-01T04:32:51.050 回答
1

将 a 设置为块级元素并将其浮动到左侧。

a {
   display:block;
   float:left;
  }
于 2012-11-01T04:35:03.910 回答