Question

这就是问题所在。我有一个haml页面，其列表如下所示：Homepage

它是一个由div（左侧）和ul按钮（右侧）组成的元素的列表。以下是汇总代码：

%li.rutinas-li{style: "overflow:visible"}
    %div{ style: "display: inline-block;" }
        = link_to ...
            ...
            %br
            %p ...
        %br
        %span
            = ...
            .thumbs-container
                =link_to ...
                     = icon('thumbs-up', ...)
                %strong ...
             .thumbs-container
                =link_to ...
                    = icon('thumbs-down', ...)
                %strong ...
            .thumbs-container
                =link_to ...
                    = icon('star', ...)
    %ul.pull-right.without-bullets.no-padding
        %li.inline-block= link_to ...
        %li.inline-block= link_to ...
        %li.inline-block= link_to ...
        %li.inline-block.dropdown
            %a.dropdown-toggle{"data-toggle": "dropdown", type: "button"}
                = icon('share-alt', ...)
            %ul.dropdown-menu{style: "min-width:0"}
                %li{style: "padding: 15px"}
                    = link_to ...
                        = icon('envelope', ...}
                %li{style: "padding: 15px"}
                     = link_to ...
                         = icon('twitter', ...")
                 %li{style: "padding: 15px;"}
                      = link_to ...
                          = icon('facebook', ...)

我需要第1行{style: "overflow:visible"}，因为最后一个ul是一个如下所示的下拉列表：如果我将其删除，则会删除下拉列表。但是，此css属性还会导致当屏幕较小（例如移动电话）时，列表显示如下：而我希望它是这样的：由于溢出是允许的，右边的按钮列表溢出了父级和他的白色分隔符，它有点难看。但是，如果我删除{style: "overflow:visible"}，则点击它时，下拉列表将无法显示

Answer 1

您的问题只是元素的宽度和高度，如果设备较小，则必须更改它。

思考响应！一个很好的解决方案是创建媒体查询并将按钮放在文本下。

如果你不想要你的＆＃39; li＆＃39;要有一个太大的高度，你也可以放置不同的文字，这样它也可以采取整个宽度。

ul溢出的问题

1 个答案: