Html 类似Facebook的按钮和twitter按钮需要在同一条线上

Html 类似Facebook的按钮和twitter按钮需要在同一条线上,html,Html,我正试图让我的类似Facebook的按钮和twitter的按钮排在同一条线上。根据下面的代码,我的twitter按钮不在同一行,但也不在第二行。有人能帮我把这些按钮对齐吗。代码如下: <p> <div class="fb-like" data-href="http://www.facebook.com/gbhuffington" data-send="true" data-layout="button_count" data-width="450" data-show-fac

我正试图让我的类似Facebook的按钮和twitter的按钮排在同一条线上。根据下面的代码,我的twitter按钮不在同一行,但也不在第二行。有人能帮我把这些按钮对齐吗。代码如下:

<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>

!函数(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);}(文档,“脚本”,“twitter wjs”);


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

  • 浮动的
    应该在非浮动的
    之前进行编码(或者像Samwise建议的那样,将它们放在同一段落中)
  • 标记中删除
    数据宽度
    属性(在许多情况下,这使得无法将任何内容放在同一行上)
  • 详情如下:

    <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>
    

    !函数(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);}(文档,“脚本”,“twitter wjs”);

  • 将fb脚本放在
    中,将twitter放在单独的div中

  • 像这样将fb div向右浮动(
    div style=“Float:right;”“

  • 将twitter div向左浮动(
    div style=“Float:left;”

  • 您的下一个内容或行应以
    div style=“垂直对齐:底部;”“
    开头,以将内容放置在底部 twitter部门的


  • 您的问题似乎与CSS有关。阅读
    位置
    浮动
    。同样,考虑使用CSS之类的960或蓝图。