1

我正在尝试将一些精灵放入页脚小部件中。当我使用我拥有的代码安装精灵时，我的图像最终出现在 4 行而不是 1 行上。我不确定我的代码哪里出错了。

精灵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 回答