FacebookとTwitterのボタンを隣り合わせにするには？

Question

私はこれを5時間の間解決しようとしてきました。私はFacebookのようなボタンとTwitterのFollowボタンを持っていて、それらを並べて欲しいですが、Twitterのボタンは下のラインに現れ続けます。私はTwitter Boostrapを使っています。これは私のHAMLコードです：

#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; 
} 

この問題を解決するためにどのように任意のアイデア？私は、ディスプレイでいくつかの他の方法を試みました：インライン;無駄に。

Answer 1

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

それは何 social-media-buttons順不同リストのラッパーとしてdivを作成しています。あなたのHAMLコードには、2つの順序付けられていないリストがありました。 1つはFacebookのためのもので、もう1つはTwitterのためのものです。また、liをラップしている不要なspanを削除しました。 spanがリスト項目を折り返すことは無効なHTMLです。リストアイテムの中にコンテンツのスタイルを設定する場合は、リストアイテムの中に見出し、divまたはタグのスタイルを追加することをお勧めします。

このコードを試して問題が解決されているかどうかを確認してください。

Answer 2

リストの項目をラップする（リストブロックを囲んでいる）のとは別に、Facebookのボタンと同じ行からTwitterボタンを相殺しているので、そのオフセットを削除して両方のボタンを並べる必要がありますちょうど良い。

未Haml'dデモ：http://jsfiddle.net/mJ3BV/1/