user-interface - 自定义 UI 元素 CSS 填充问题

Question

我创建了一个自定义下拉元素，该元素列在此页面上：

http://jsfiddle.net/spryno724/2snUH/3/

单击“结果”部分的下拉菜单，您将看到问题。通过滚动展开下拉列表中的选项，您会注意到滚动指示器不会延伸到可用宽度。

在折叠时仍然保持菜单宽度的同时，如何拉伸每个菜单项的背景颜色？我还希望每个菜单项都保留在自己的行中。我对 CSS 进行的一些调整导致一些列表项包含自己的文本。

感谢您的时间。

Answer 1

对项目使用负边距width: auto而不是width: 100%：

UL.dropdown.open LI {
    margin: 0 -23px 0 -10px;
    padding-right: 23px;
    padding-left: 10px;
    position: relative;
    width: auto;
}

请参阅http://jsfiddle.net/2snUH/4/。

或者摆脱水平填充UL（并指定水平填充LI代替），然后您将不需要LI项目的负边距。

Answer 2

要固定 li 元素的宽度，请使用：

    ul.dropdown.open {
    padding: 5px 0;
}
    ul.dropdown.open li {
        display: block;
        padding: 5px;
        text-wrap: none;
        width: 100%;
        box-sizing: border-box;
    }