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

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

4

2 回答 2

0

您的 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一个包装器。在您的 HAML 代码中，您有两个无序列表。一个用于 Facebook 点赞，另一个用于 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 回答