无法获得共享按钮对齐!
问题描述:
我试图对齐分享,像水平tweet按钮,但我无法获得正确的分享按钮。我尝试添加垂直对齐顶部,更改高度并显示:内联,但它总是保持低于其他的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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' 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>
感谢
答
不是个别造型这些元素更简单的方法,就是三明治里面他们的标签<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有关的任何问题,请告知我。
答
做显示:内联你可以用每个控制到列表如下:
<ul><li>
<a class=....../>
</li> <li> <a expr....../> </li></ul>
此外,添加:列表样式类型:无; 为了让你的控件坚持在屏幕的右侧, 做: 位置:绝对; right:0;