自定义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;
    }