如何將Facebook和Twitter按鈕放在一起？

我一直在試圖解決這個問題，現在5個小時了，我似乎沒有任何工作。我有一個類似Facebook的按鈕和一個Twitter關注按鈕，我希望它們並排排列，但Twitter按鈕不斷出現在下面的線上。我正在使用Twitter Boostrap。這是我的HAML代碼：如何將Facebook和Twitter按鈕放在一起？

#social-media-container.container 
%ul.social-media-buttons 
    %span.span3.offset2 
     %li.socialmedia 
      %h3 Like us on Facebook 
      .facebook-like-button 
      %script{:src => "http://connect.facebook.net/en_US/all.js#xfbml=1"} 
      %fb:like{:layout => "button_count", :show_faces => "false", :width => "100"} 
%ul.social-media-buttons 
    %span.span3.offset6 
     %li.socialmedia 
      %h3 Follow us on Twitter 
      %a.twitter-follow-button{"data-count" => "horizontal", :href => "https://twitter.com/..."}Follow ... 
      %script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}

我的CSS代碼：

.social-media-buttons{ 
float: left; 
list-style: none; 
margin: 5px 0 20px 0; 
padding: 0; 
width: 100%;

}

ul.social-media-buttons li{ 
    display: block; 
    float: left; 
    margin-right: 10px; 
} 
twitter-follow-button{ 
    margin-top: 2px; 
}

任何想法如何解決這一問題？我已經嘗試了其他幾種方法，並使用display：inline;無濟於事。

來源

2012-04-30 Anoel

@Anoel：爲什麼你有一個包裹跨度在'。社會，媒體buttons'列表中的列表項？ – sarcastyx

跨度在那裏試圖抵消他們對中心。他們在我將它切換到ul之前就在那裏，我沒有想到要改變它。 – Anoel

您的HAML代碼有一些錯誤。首先你要創建一個空的div。我假設你想要div作爲.social-media-buttons無序列表的包裝工作。在這種情況下，你的HAML應該是這樣的：

#social-media-container.container 
    %ul.social-media-buttons 
     %li.socialmedia 
      %h3 Like us on Facebook 
      .facebook-like-button 
      %script{:src => "http://connect.facebook.net/en_US/all.js#xfbml=1"} 
      %fb:like{:layout => "button_count", :show_faces => "false", :width => "100"} 
     %li.socialmedia 
      %h3 Follow us on Twitter 
      %a.twitter-follow-button{"data-count" => "horizontal", :href => "https://twitter.com/..."}Follow ... 
      %script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}

這樣做是它創建的div作爲一個social-media-buttons無序列表的包裝。在你的HAML代碼中，你有兩個無序列表。一個用於Facebook，另一個用於Twitter。我還刪除了包裝li的不需要的span。有一個span包裝一個列表項是無效的HTML。如果你想在列表項中設置內容的樣式，那麼我會建議在列表項中添加標題，div或標籤的樣式。

試試這個代碼，看看它是否修復了這個問題。

來源

2012-04-30 01:45:45 sarcastyx

謝謝！我改變了它，然後添加一個.offset3到.social-media-buttons並且它的工作將它居中。 – Anoel

除了包裝你的列表項目（它應該包裝列表塊），你正在將你的twitter按鈕與facebook按鈕排除在同一行之外，所以只需刪除該偏移量，並且兩個按鈕應該排隊正好。

取消Haml'd演示：http://jsfiddle.net/mJ3BV/1/

來源

2012-04-30 01:53:20

如何將Facebook和Twitter按鈕放在一起？

回答

相關問題