css - auto br 是什么原因引起的

Question

我有 3 个 Sprite 的 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，就是这个原因。 block 占据其父元素的整个宽度，因此一系列 block 看起来像一个堆栈。

改用display: inline-block。