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>标记内 - 允许您轻松定位父<ul>，以及float <li> }标签（创建你所追求的'内联'效果。）

jsFiddle不喜欢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>

使用一些非常简单的CSS（包括一个微妙的轮廓，以便您可以看到<li>元素的边界：

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

您可以在此处找到上述示例：http://jsfiddle.net/kgFaW/

这应该让你朝着正确的方向前进。如果您遇到Facebook API的任何问题，请告诉我。

Answer 2

进行显示：内联你可以将每个控件包装成这样的列表：

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

另外，添加：list-style-type：none; 要使控件贴在屏幕的右侧，做：位置：绝对的; 右：0;

无法让Share Button对齐！

2 个答案: