どうしてもボタンが横一列に並ばないのです (/_;

WordPress日本語版3.01利用中です。

現在テーマをカスタマイズ中ですが、ソーシャルブックマークをsingle.phpに追加したところ、3つあるボタンのうち、2つは横に並ぶのに3つ目のボタンがどうしても改行された状態で表示されてしまいます。

原因は何が考えられるでしょうか。週末つかって頑張ったのですが、どうしても解決にいたりません。ノイローゼになりそう (/_;)

single.phpのボタン表示を記述している部分です。

<div class="social">
<div class="tweet_button">
<a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-url="<?php the_permalink() ?>" data-count="horizontal" data-via="自分のID">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script …

<div class="hatebu_button">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/butto … alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>

<div class="facebook">
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false"></fb:like></div>
</div>

※facebookはiflameのパターンも試しました。上記はAppID取得による短縮コードで表示じたいに問題はありません。

CSSは、

/* Begin Social Media */

div.post .social {
margin-top: 2px;
}

div.post .social .tweet_button {
float: left;
display: inline;
width: 100px;
}

div.post .social .hatebu {
display: inline;
}

div.post .social .facebook {
display: inline;
}

div.postcontent {
clear: both;
}

/* End Social Media */

です。いったいどこの何が問題で3つのボタンが横一列にならないのでしょうか？？？

皆さん教えて下さい。さんざん時間も頭もつかったけれど、解決できないでおります。

Twitter はてブ　←は、横に並ぶ
facebook　←が、こんなふうに改行されてしまう。

Twitter はてブ facebook

と並べたいのです・・・・・。宜しくお願いします！

No.2 回答者： naokita 回答日時： 2010/11/29 21:24

各、ブロックの領域を把握する事で解決するでしょう。

該当ブロックに枠線や背景色をつけてみる。
border:1px solid red;
background-color:yellow;
など（色は何でもいい）

または、firebugなどで、領域を一発で判断できます。
実際の画像配置を
CSSが分かる人に見てもらえば、すぐに解決するでしょう。

表示に関してはCSSで不可能は無いでしょう。
　１、ブロックレベルで枠の幅を把握し、widthを設定
　２、floatやinline、positionなどで設定。
---------------------------------------------
要は、何が外枠だか判断する事。
.hatebu は意味無いですからね・・・
.hatebu_button をどうするかの問題。

No.1 回答者： naokita 回答日時： 2010/11/29 01:42

検証はしていないが、はてなブックマークに幅があるからかな。

色々方法があるけど、
以下を追加したらどうなる？　幅は適当に

.social .hatebu_button, .social .facebook {float:left; width:100px;}

この回答への補足

ありがとうございます。

で、ここで質問をさせていただいてから、自分でも作業を続けていて、その中で3つのボタンに対するwidthとfloatをすべて100pxとleftで指定してやってたのですがダメでした。

しかし、ボタンの順番を変えてみたところ、

Twitter いいね！ はてブ　で横並びになりました。

しかし、

Twitter はてブ いいね！　だと、いいね！は改行され、

同じく

はてブ Twitter いいね！　を試したところ、

はてブ
Twitter いいね！
のように改行されました。

どうやら「はてブ」ボタンの右側には何も置けないことになっているようです。一部で「はてブ」は横幅を取るとの話を聞きましたが、この場合に限れば、widthを100pxに指定しているので、なぜこのようになってしまうのか、原因がわかりません。

cssが機能してないのか？と考えたので、このwidthをそれぞれひとつずついじってみました。例えば、いいね！ボタンは100pxだと隣にある、はてブボタンとの間隔があいてしまうので、80pxにしました。するときちんと間隔が調整されました。また、一番最初に配置しているTwitterボタンのwidthを0pxにしてみたら、隣のいいね！ボタンが左側にくっつきTwitterボタンがかくれました。

cssは機能しているようです。

こうなってくると「はてブ」の

<div class="hatebu_button">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/butto … alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>

この中に私が気づいていない幅や何か指定があるのでしょうか？？？

ちなみに記事全体の横幅は468pxです。AdSenseの横幅に合わせて記事幅も決めているのですが、ボタン3つのwidthは合計で300pxですから、これじたいが問題だとは思っていないのですが、いかがでしょうか。他のサイト、ブログを見ても、私より幅の狭い箇所にはてブボタンが設置されてるのを目で見て確認してるので、原因が特定できません。

気づいた方がいらっしゃったら、是非アドバイスをお願い申し上げます。

補足日時：2010/11/29 10:14