使 facebook 分享/like 插件和 twitter 分享插件并排对齐答案

【问题标题】：making facebook share/like plugin and twitter share plugin align side by side使 facebook 分享/like 插件和 twitter 分享插件并排对齐
【发布时间】：2013-12-31 16:34:18
【问题描述】：

我有以下fiddle，我正在尝试让 facebook 和 twitter 完美地并排对齐，但我不能，因为我认为 facebook 在脚本加载后会进行一些重新布局。任何人都可以帮助我如何使这看起来不错并将它们并排对齐。这是一些代码：

<div class="row shop-share-items">
    <iframe src="//www.facebook.com/plugins/like.php?href=http://www.google.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=35&amp;appId=467928753241936" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>

                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.google.com" data-via="google" data-lang="id" data-hashtags="google">Tweet</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

                </div>

【问题讨论】：

AddThis 是一项简洁的（免费）服务，可为您处理社交连接。

标签： html css facebook twitter

【解决方案1】：

并排？你可以用花车做到这一点:)

http://jsfiddle.net/sAjg5/1/

.shop-share-items iframe { float: left; }

【讨论】：

您也可以使用显示内联无序列表来做到这一点，但似乎使用 div 和浮动导致的问题较少。我在社交分享按钮上花了太多时间。我很生气 Facebook 最近改变了一些事情。 Google+ 按钮还具有在 Safari 中不起作用的广告功能...
我确实同意@stacey.mosier 的评论，AddThis 非常简洁，并且消除了麻烦。只是不确定它是否具备某些人需要的所有可定制性。
如果您想使用 Google Analytics 跟踪共享，您需要为除 Google+ 之外的所有内容滚动。有一些 WordPress 插件可以做到这一点。我总是使用官方按钮，只是调整和测试......

【解决方案2】：

将类添加到 Facebook iframe，例如fb-share 然后在 CSS 下面使用

.fb-share {
  width: 135px;
}
.fb-share,
.twitter-share-button {
  display: inline-block;
  float: left;

}

更新Fiddle

【讨论】：