ul溢出问题答案

【问题标题】：Trouble with ul overflowul溢出问题
【发布时间】：2017-12-19 15:14:18
【问题描述】：

这就是问题所在。我有一个带有如下列表的 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"}，当我点击它时下拉菜单将不可见

【问题讨论】：

标签： html css twitter-bootstrap haml

【解决方案1】：

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

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

如果您不希望您的“li”高度过大，您也可以以不同的方式放置您的文本，这样它也可以占据整个宽度。

【讨论】：