ul溢出的问题

Question

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

它是一个由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

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

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

如果你不希望你的'li'有一个太大的高度，你也可以放置不同的文字，这样它也可以采取整个宽度。