Кнопка «Нравится» на 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

1. Поместите скрипт fb в <div> и twitter в отдельный div.

2. Плавающий разделитель fb вправо, как это (div style="float:right;")

3. Перемещение разделителя Twitter влево (div style="float:left;")

4. Ваш следующий контент или строка должны начинаться с div style="vertical-align:bottom;", чтобы разместить контент в нижней части раздела Twitter.

Answer 2

Прежде всего, не помещайте их в отдельные абзацы.

Здесь они отображаются для вас.

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>