共有ボタンを並べることができません！

Question

私は、ツイートボタンのような共有を水平に整列しようとしていますが、共有ボタンを正しく取得できません。私は、縦に並んだ上部を追加して、高さと表示を変えてみました：インラインですが、それは常に他のものより10px以下です。それらをすべて整列させるために私は何をすべきですか？表示を行うための

<div style='vertical-align: top;'> 

<a expr:share_url='data:post.url' name='fb_share'/> 

<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-related=':' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> 

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:20px;'/> 
</div> 


<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'> 
</script> 

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'> 
</script> 

おかげ

Answer 1

個別にこれらの要素をスタイリングよりも簡単方法は、<li>タグ内部のサンドイッチそれらをしています

jsFiddleはfacebook APIが気に入らなかったので、代わりに3つのTwitterボタンを使用しました。コードは次のようになります。あなたがここに上記の例を見つけることができます

.social_network { 
    position : relative; 
    list-style-type : none; 
} 
.social_network li { 
    float : left; 
    border : 1px solid rgba(0,0,0,.1); 
    padding : 6px; 
    margin : 2px; 
} 

：あなたは<li>要素の境界を見ることができるように微妙なアウトラインを含むいくつかの非常に単純なCSS（と

<ul class="social_network"> 
    <li> 
     <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="">Tweet</a> 
    </li> 

    <li> 
     <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="">Tweet</a> 
    </li> 

    <li> 
     <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="">Tweet</a> 
    </li> 
</ul> 

： http://jsfiddle.net/kgFaW/

Facebook APIに関する問題が発生した場合は、教えてください。

Answer 2

：

<ul><li> 
<a class=....../> 
</li> <li> <a expr....../> </li></ul> 

また、追加：リストスタイルのタイプを：あなたは、このようにリストに各コントロールをラップすることができますインラインなし。 コントロールを画面の右側に固定するには、 は次のようにします。 位置：絶対; 権利：0;あなたが簡単に親<ul>を配置することができ、また、float<li>タグは（あなたが後にしている「インライン」効果を作り出す。） -