Jquery CSS背景色不是高亮度文本，已“溢出”

我正在动态填充一个可滚动的。我能够在HTML和jQueryUI中创建它。我遇到的问题是，当我有一个较长的条目，并使用overflow:scroll向右滚动时，高亮显示的长度仅与开始滚动之前选择的宽度相同。如何将高光延伸到最长条目的宽度？还是文本的长度

HTML jQuery --更新--

来自@TheUknown的答案对于用户来说非常有效。为了便于将来参考，若要修复一个正则表达式，请尝试使用display:table的变体

---

发生这种情况是因为默认显示为列表类型，不包括溢出的内容

只需将其更改为内联块

这是你的电话号码

<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>

#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;
}

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

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

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