Question

我动态填充<select>可滚动的overflow: scroll。我能够在HTML和jQuery UI中创建它。我遇到的问题是，当我有一个长条目并且我向右滚动（使用<div id="div1"> <ol id="selectable"> <li>this/is/a/really/really/really/long/path/name.....................................</li> <li>Enterprise Service Management/ALMD/alm-manifest-name</li> <li>joshtestrepo</li> <li>notatestrepo</li> <li>vanilla ice cream</li> </ol> </div> <div id="div2"> <select id="selection" size="4"> <option>this/is/a/really/really/really/long/path/name.....................................</option> <option>Enterprise Service Management/ALMD/alm-manifest-name</option> <option>joshtestrepo</option> <option>notatestrepo</option> <option>vanilla ice cream</option> </select> </div>）时，突出显示只有在开始滚动之前与选择的宽度一样长。如何将突出显示扩展到最长条目的宽度？（或文本的长度）

JSFiddle

HTML

#selectable .ui-selecting {
    background: #FECA40;
}
#selectable .ui-selected {
    background-color: #F39814;
    color: green;
}
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
    resize:both;
}
#selection {
    width:250px;
    overflow:scroll;
    resize:both;
}

CSS

$(function () {
    $("#selectable").selectable();
});

$("#selectable").selectable({
    selected: function (event, ui) { 
        $(ui.selected).siblings().removeClass("ui-selected"); //forces a single select
    }
});

的jQuery

#selectable

--- --- UPDATE

来自@TheUknown的答案非常适合<select>。为了将来参考，要修复常规display:table，请尝试使用9.4的变体。

Updated fiddle

Answer 1

发生了这种情况，因为默认显示为list type，但不包含溢出内容。

只需将其更改为inline-block

即可

#selectable .ui-selected {
    background-color: #F39814;
    color: green;
    display: inline-block; 
}

以下是working fiddle

CSS背景颜色不是高亮的文字，有＆＃34;溢出＆＃34;

HTML

CSS

的jQuery

1 个答案: