内置Facebook和谷歌+按钮内联? [英] placement of facebook like and google + buttons inline?
本文介绍了内置Facebook和谷歌+按钮内联?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有人有任何技巧来对齐页面上的这两个按钮?默认情况下,facebook like按钮的iframe版本出现在google plus按钮下方,反之亦然。有没有任何css技巧让他们内联?
Does anyone have any tricks to aligning these two buttons on a page? By default the iframe version of the facebook like button appears below the google plus button or vice versa. Are there any css tricks to keep them inline?
这是我目前的尝试
<div style="float:left;width:100px;">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style="float:left;width:auto;">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmy_site&layout=button_count&show_faces=false&width=350&action=like&font=lucida+grande&colorscheme=light&height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px;" allowTransparency="true"></iframe>
</div>
推荐答案
将它们放入列表中 - 这就是我所做的请原谅jsp)
Put them in a list - here's what i done (excuse the jsp)
<ul class="like-buttons">
<li class="g-plus-one">
<g:plusone count="false"></g:plusone>
</li>
<li class="twitter-like">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%= url %>" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>
<li class="fb-like">
<iframe src="http://www.facebook.com/plugins/like.php?href=<%= facebookUrl %>&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=dark&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px; color:#fff!important;" allowTransparency="true"></iframe>
</li>
和css:
ul.like-buttons{
float: left;
list-style: none;
margin: 5px 0 20px 0;
padding: 0;
width: 100%;
}
ul.like-buttons li{
display: block;
float: left;
margin-right: 10px;
}
li.twitter-like{
margin-top: 2px;
}
这篇关于内置Facebook和谷歌+按钮内联?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文