0

私はこれを5時間解決しようとしてきましたが、何もうまくいかないようです。Facebook の「いいね」ボタンと Twitter のフォロー ボタンがあり、それらを並べて配置したいのですが、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;
}

これを修正する方法はありますか？display: inline; を使用して、他にもいくつかの方法を試しました。無駄に。

4

2 に答える 2

0

HAML コードにいくつか誤りがあります。まず、空のdiv. .social-media-buttonsdiv を順序付けられていないリストのラッパーとして機能させたいと考えています。その場合、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"}

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

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

于 2012-04-30T01:45:45.870 に答える
0

リスト項目をラップする以外にspan（リストブロックをラップすることになっています）、TwitterボタンをFacebookボタンと同じ行からオフセットしているので、そのオフセットを削除するだけで、両方のボタンがうまく整列するはずです。

Un-Haml'd デモ: http://jsfiddle.net/mJ3BV/1/

于 2012-04-30T01:53:20.150 に答える