I need horizontal scroll bar with fixed width and right side check box.
Currently I truncate the text, but I need horizontal scroll without truncate.
请参阅我的示例页面: - https://jsfiddle.net/gsk/hxxk53ey/22/
Thanks in advance.
答案 0 :(得分:1)
我认为这就是你想要的:
.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>
</ul>
</div>
</div>
&#13;
抱歉,我删除了一些不必要的样式以使其更具可读性
修改强> 我已经为此目的使用了Flex Box。检查新语法