我觉得这是你想要什么:
.available-box-options {
width: 500px;
font-family: Arial;
font-size: 13px;
border: solid 1px #000;
width: 500px;
}
.options-box {
margin-top: 11px;
margin-bottom: 11px;
margin-right: 1px;
position: relative;
overflow-x: auto;
}
ul.options {
margin: 0;
padding: 0;
display: inline-block;
}
ul li div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
white-space: nowrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.selected-option-icon {
width: 20px;
height: 20px;
margin-left: 30px;
}
<div class="available-box-options">
<div class="options-box">
<ul class="options centralScrollBar" central-scroll-event="availableItemsScroll()" style="overflow-y: auto">
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > runing</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
<li style="height: 30px; display: block;">
<div style="height:30px">
<div class="selected-option">Test > run > test > run > test > run > test > run > test > run > test > run > test > run > run > test > run</div>
<div class="selected-option-icon"> <input type="checkbox"></div>
</div>
</li>
\t </ul>
</div>
</div>
对不起,我已经删除了一些不必要的样式es使其更具可读性
编辑: 我已经使用过Flex盒。检查新的语法
设置'overflow-x:scroll;'到你想要的宽度的容器 –
试试这个https://jsfiddle.net/hxxk53ey/23/ Hossein说 –
@AB Udhay - 我没有希望个人滚动,但我需要整体水平滚动文本。 – Gsk