Question

我一直在尝试解决这个问题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;
}

知道怎么解决这个问题吗？我还尝试了其他几种显示方式：内联;无济于事。

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

这样做会创建div作为一个 social-media-buttons无序列表的包装器。在您的HAML代码中，您有两个无序列表。一个用于Facebook，另一个用于Twitter。我还删除了包含span的不需要的li。将span换行列表项是无效的HTML。如果你想在列表项中设置内容的样式，那么我建议在列表项中添加标题，div或标记的样式。

尝试使用此代码，看看它是否解决了问题。

Answer 2

除了span包装您的列表项（它应该包装列表块）之外，您将Twitter按钮与facebook按钮的行相同，因此只需删除该偏移量和两个按钮应排队好。

Un-Haml'd Demo：http://jsfiddle.net/mJ3BV/1/

如何将Facebook和Twitter按钮放在一起？

2 个答案: