有没有人有任何技巧来调整页面上的这两个按钮?默认情况下,如果在Google plus按钮下方显示Facebook like按钮的iframe版本,反之亦然.有没有任何css技巧来保持内联?
这是我目前的尝试
<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)
<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; }