Question

所以基本上我有一个具有ul li结构的自定义多选列表。问题在于，在选择元素时，它会被突出显示，但如果向右滚动，则突出显示的部分不会填满整行。

一种解决方案是为每个display: table-row;元素分配li属性，之后突出显示的部分填充整行，但问题是添加行后，点击白色部分时开始没有反应，只有直接点击文字时，他们才会回复。

Answer 1

你可以将ul包装在一个包装器中，如下所示：

<div class="wrapper">
    <ul class="files multiple-select MultipleSelectBox vertical" unselectable="on" tabindex="0" style="-webkit-user-select: none;">
        ....
    </ul>
</div>

然后将您的包装盒样式放到包装器上，并像ul display:table那样：

.wrapper {
    overflow: auto;
    width: 200px;
    height: 200px;
    border: 1px solid #aaa;
    /* corner */
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888;
}

.MultipleSelectBox {
    display:table;
    list-style-type: none;
    margin: 0;
    padding: 1px 0;
    background-color: white;
    color: black;
}

Example

修改

以下是另一个版本，其中包含以下修复：

选择项目时没有黑色边框创建点击效果
更好的边界半径，所以滚动条不会保持正方形

Updated fiddle

Answer 2

你需要添加包装div 并将你的UL-li放入div中

.wrapper {
    overflow: auto;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

和

.MultipleSelectBox {
    width: 200px;
    border: 1px solid #aaa;
    height: 200px;
    list-style-type: none;
    margin: 0;
    overflow: none;
}

如何使可滚动ul中的li项占据所有宽度？

2 个答案: