css - 什么原因导致自动 br

Question

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

我怎样才能把它们放在一起？

Answer 1

他们都有display: block，这就是原因。块占据其父元素的整个宽度，因此一系列块看起来像一个堆栈。

改为使用display: inline-block。