2012-03-12 46 views
0

我想讓我的Facebook像按鈕和微博按鈕排隊在同一行。使用下面的代碼,我的twitter按鈕不是完全在同一行上,但也不在第二行上。有人可以幫助我在同一條線上對齊這些按鈕。下面是代碼: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> 
+0

你的問題似乎與CSS有關。閱讀「位置」和「浮動」。另外,考慮使用類似960或Blueprint的CSS – MilkyWayJoe 2012-03-12 20:17:29

回答

0
  1. 你飄來<p>應該之前編碼非浮置<p>(或把它們放在同款,像Samwise建議)。
  2. 從您的<div class="fb-like">標記中刪除data-width屬性(在很多情況下,無法將任何東西放在同一行上)。

如下:

<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> 
1
  1. 把FB腳本在<div>和Twitter在一個單獨的DIV。

  2. 浮動像這樣(div style="float:right;"

  3. 浮動的FB格右側的Twitter DIV左(div style="float:left;"

  4. 你的下一個內容或行應該與div style="vertical-align:bottom;"開始放置在底部 內容的Twitter部分。