Css Can';不要让共享按钮对齐!

Css Can';不要让共享按钮对齐!,css,Css,我试图水平对齐共享按钮,如和tweet按钮,但我无法正确设置共享按钮。我尝试添加垂直对齐顶部,改变高度和显示:inline,但它总是比其他的多10像素。我应该怎么做才能使它们都对齐 <div style='vertical-align: top;'> <a expr:share_url='data:post.url' name='fb_share'/> <a class='twitter-share-button' data-count='horizontal

我试图水平对齐共享按钮,如和tweet按钮,但我无法正确设置共享按钮。我尝试添加垂直对齐顶部,改变高度和显示:inline,但它总是比其他的多10像素。我应该怎么做才能使它们都对齐

<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>


感谢

to do display:inline您可以像这样将每个控件包装到列表中:

  <ul><li>
<a class=....../>
</li> <li> <a expr....../> </li></ul>
另外,添加:列表样式类型:无; 要使控件粘贴到屏幕的右侧, 做: 位置:绝对位置;
右:0

比单独设置这些元素的样式更简单的方法是将它们夹在
  • 标记中——允许您轻松定位父级
    ,以及
    浮动
  • 标记(创建您所追求的“内联”效果)

    JSFIDLE不喜欢facebook API,所以我使用了3个twitter按钮;代码如下所示:

    <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>
    
    您可以在此处找到上述示例:

    这会让你走上正确的方向。如果你在Facebook API上遇到任何问题,请告诉我

    .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;
    }