css - 自動brの原因

Question

スプライト用のCSS関数が3つあり、それらとのリンクを作成しました。画像が読み込まれると、そのようになります

私のコードのいくつかを以下に示します。

#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代わりに使用してください。