Question

我有以下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>

Answer 1

侧由端？您可以使用浮点数执行此操作：）

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

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

Answer 2

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

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

}

更新了Fiddle

让facebook分享/喜欢插件和Twitter分享插件并排排列

2 个答案: