Question

Twitter和Facebook按钮对齐没问题，但是g + last按钮前面有很多空间。我想把所有三个按钮放在一起。

我的CSS代码：

div.social_sharing .g-plusone, .fb-like, .twitter {
    font-size: 1px;
    display: inline-block;
}

和html：

<div class="social_sharing">
   <div class="twitter"><a href="http://twitter.com/share?url=http://www.mywebsite.com" class="twitter-share-button">Tweet</a></div>
   <div class="fb-like" data-href="http://www.mywebsite.com" data-layout="button_count" data-width="200" data-show-faces="false" data-font="trebuchet ms"></div>
   <div class="g-plusone" data-size="medium" count="true" callback="fire_multitrack" href="http://www.mywebsite.com"></div>
</div>

更好的观点： http://jsfiddle.net/2vNKJ/

Answer 1

找不到任何方法来删除g +按钮之前的空格，所以我决定把它放在facebook按钮之前，这样就可以了。

Answer 2

我有两个问题

有一个.fb_reset div，必须有display: inline;
您必须设置Facebook的iframe：http://jsfiddle.net/kizu/2vNKJ/1/的宽度，或者您可以更改顺序：http://jsfiddle.net/kizu/2vNKJ/2/，但是您需要更改+的宽度1 iframe。

空格的问题在于按钮的内容可能会有很多变化：不同的数字和额外的元素（对于Facebook的代码段），因此水平对齐这些按钮可能非常困难。

Answer 3

您是否尝试过调整左边距？像这样：

   div.g-plusone {
      margin-left:0px;
   }

您甚至可以尝试将其设置为负数。

Answer 4

试试这个：

http://forrst.com/posts/Placing_Tweet_and_Like_buttons_side_by_side-0Or

对于wordpress博客可以修复这样的推特链接

<a href="https://twitter.com/share?text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" class="twitter-share-button" data-via="iphonemods" data-hashtags="imod">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

如何正确对齐Tweet，facebook和g +按钮？

4 个答案: