Css sprite上意外出现换行符

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

sprite 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>

如有任何建议或想法，将不胜感激

---

而且，我的精灵图像偶尔也会消失

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

除了url和（）之间的空间之外，在这里工作得很好

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;
}