像按钮和推特按钮这样的Facebook需要在同一条线上

Question

我正试图将我的Facebook按钮和推特按钮排在同一条线上。使用下面的代码，我的推特按钮不是在同一条线上，但也不是在第二行。有人可以帮我把这些按钮对齐在同一条线上。下面是代码：

<p> 
<div class="fb-like" data-href="http://www.facebook.com/gbhuffington" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" style=" width: 200px; clear: none; float: left; "></div>
</p>
<p style="width: 200px; float: left; clear: none;">
<a href="https://twitter.com/GBHuffington" class="twitter-follow-button" data-show-count="false">Follow @GBHuffington</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> 
</p>

Answer 1

首先，不要将它们放在单独的段落中。

Here they are displaying inline for you.

Answer 2

1. 将fb脚本放在<div>和twitter中的单独div中。

2. 像这样浮动fb div（div style="float:right;"）

3. 将twitter div左移（div style="float:left;"）

4. 您的下一个内容或行应以div style="vertical-align:bottom;"开头，以将内容放在底部 twitter div。

Answer 3

1. 您的浮动<p>应该在非浮动<p>之前编码（或者将它们放在同一段落中，就像Samwise建议的那样）。
2. 从data-width标记中删除<div class="fb-like">属性（在许多情况下，它无法将任何内容放在同一行上）。

如下：

<p style="width: 200px; float: left; clear: none;">
  <a href="https://twitter.com/GBHuffington" class="twitter-follow-button" data-show-count="false">Follow @GBHuffington</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> 
</p>
<p> 
  <div class="fb-like" data-href="http://www.facebook.com/gbhuffington" data-send="true" data-layout="button_count" data-show-faces="true" style="clear: none; float: left;"></div>
</p>