我需要固定的寬度和右側複選框水平滾動條

Question

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. 

Answer 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> 
 
\t  </ul> 
 
    </div> 
 
</div>

對不起，我已經刪除了一些不必要的樣式es使其更具可讀性

編輯： 我已經使用過Flex盒。檢查新的語法