調べ方がはっきりしません。

まだ解決にいたっておりませんが、具体的にご教示いただきたいので、進捗をご報告。

表示させようと思っているのは、ソーシャルブックマークの3つ。
single.phpの投稿記事タイトルの下
左からTwitter, はてブ, いいね！（順番にはこだわってないのですが）横一列に表示したい。
現在は、左からTwitter, はてブ　までは横に並んで表示されるのに、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="xxxxxxxx">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<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/button-only.gif" 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>

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つのボタンに対する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/button-only.gif" 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ですから、これじたいが問題だとは思っていないのですが、いかがでしょうか。他のサイト、ブログを見ても、私より幅の狭い箇所にはてブボタンが設置されてるのを目で見て確認してるので、原因が特定できません。

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

ありがとうございます。

勉強しながら試行錯誤してやっていますが、せっかくアドバイスいただいたのに、上記内容ですといまいちわかりませんでした。で、頭で考えていても始まらないので、実際に試してみても、うまくいきませんでした。多分どこかで間違っているのだと思います。私のやり方が。

<style type="text/css">ということは、.cssは編集せず、header.phpの</head>の上に

/* Begin Social Media */
.social{width:468px;}
.social li{width:100px;float:left;list-style:none;}
/* End Social Media */
</style>

を挿入して、表示したいphpファイル、私の場合はsingle.phpのその場所に
<ul class="social">はじまるコードを</ul>
まで挿入するということだと思います。

うまくいきませんでした。で、.cssを同じように編集してみました。

/* Begin Social Media */

.social{
        width: 468px;
        }
.social li{
        width:100px;
        float: left;
        list-style: none;
        }
.social{
 　　 clear: both;
        }

/* End Social Media */

このようにした上で、single.phpには、

<ul class="social">
<li class="tweet_button">コード</li>
<li class="hatebu_button">コード</li>
<li class="facebook">コード</li>
</ul>

としました。が、3つ横一列に並びはしましたが、それぞれのボタンの幅の間隔がばらばらで、最初のボタンが左端から50pxほど離れたところから表示されます。2つ目と3つ目の間隔も統一されてません。

ところで、facebookのところでstyle="border:1px solid #ccc;"こんなふうにしているのは何か意味があるのですか？線は要らないのですが・・・。なのでこれは消しました。

勉強はしてます。だから、こんなふうに考えることも失敗することもできるのですし。覚えたてで、まだまだ断片的な知識だからこうなってるのです。いっぺんに100%というわけにはいきませんので、どうかお許し下さい。