1

いくつかのスプライトをフッターウィジェットに入れようとしています。持っているコードでスプライトをインストールすると、画像が1行ではなく4行になってしまいます。コードのどこに誤りがあるのか​​わかりません。

スプライトhtmlは

<div>
  <a class="calendar-sp" href="http://www.tara.meditationinsantabarbara.org/calendar"></a>
  <a class="twitter-sp" href="http://www.twitter.com/MahakankalaBC/"></a>
  <a class="facebook-sp" href="http://www.facebook.com/MahakankalaBuddhistCenter/"></a>
  <a class="eBooklead-sp" href="http://www.emodernbuddhism.com/"></a>
</div>

そして私のスプライトCSSは

a.calendar-sp,
a.eBooklead-sp,
a.twitter-sp,
a.facebook-sp
 {
    display: inline-block;
        background-repeat: no-repeat;
        background-image:url ('http://www.tara.meditationinsantabarbara.org/wp-content/uploads/2012/11/SocialSpriteSheet5.png');
}

a.calendar-sp
{
        width:  184px;
    height: 175px;
}

a.eBooklead-sp
{
    background-position:    -184px 0;
    width:  213px;
    height: 175px;
}

a.twitter-sp {
    background-position:    -397px 0;
    width:  128px;
    height: 128px;
    }

a.facebook-sp
{
    background-position:    -525px 0;
    width:  128px;
    height: 128px;
}

任意の提案やアイデアをいただければ幸いです。

また、私のスプライト画像が時々消えます！

4

1 に答える 1

0

すべてのボタンが隣り合って表示されるように div の幅を設定する必要があります。また、float:left または float:right を追加して、スプライトをその方法で配置したいことをブラウザに知らせます。

于 2012-11-16T03:32:14.913 に答える