Question

我正在尝试将一些精灵放入页脚小部件中。当我使用我的代码安装精灵时，我最终将我的图像放在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;
}

任何建议或想法将不胜感激。

另外，我的精灵图像偶尔也会消失！

Answer 1

你需要设置div的宽度以允许所有按钮彼此相邻，我还会添加一个浮点数：left或float：right让浏览器知道你希望精灵定位在那里时尚

换行意外地出现在精灵上

1 个答案: