-1

何らかの理由で、画像に設定したクラスに設定した画像が表示されませんが、設定した場合.book li, a.foo、1 つのセット クラスの 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 に答える