我有精灵的3个CSS函数,我创建了一个链接。加载图像时,它们就是这样
我的一些代码如下:
#twitterReply
{
width:16px;
height:16px;
text-decoration:none;
display:block;
background-image:url('path');
background-position:-0px -0px;
}
#twitterReply:hover,#twitterReply:active { background-position:-16px -0px; }
#twitterRetweet
{
width:16px;
height:16px;
text-decoration:none;
display:block;
background-image:url('path');
background-position:-32px -0px;
}
#twitterRetweet:hover,#twitterRetweet:active { background-position:-48px -0px; }
#twitterFavorite
{
width:16px;
height:16px;
text-decoration:none;
display:block;
background-image:url('path');
background-position:-64px -0px;
}
#twitterFavorite:hover,#twitterFavorite:active { background-position:-80px -0px; }
我怎样才能把它们放在一起?
答案 0 :(得分:2)
他们都有display: block
,这就是原因。块占据其父元素的整个宽度,因此一系列块看起来像堆栈。
改为使用display: inline-block
。