换行符意外出现在精灵上答案

【问题标题】：Line breaks unexpectedly appearing on sprite换行符意外出现在精灵上
【发布时间】：2012-11-16 11:32:14
【问题描述】：

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

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

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

【问题讨论】：

在这里工作正常，除了 url 和 () 之间的空格
jsfiddle.net/j08691/5Tnar

标签： css text-alignment

【解决方案1】：

您需要设置 div 的宽度以允许所有按钮彼此相邻，我还会添加一个 float:left 或 float:right 让浏览器知道您希望精灵在其中定位自己时尚

【讨论】：