CSS水平DIV滾動

Question

我有一列視頻元素，如果它們溢出容器的寬度，我想水平滾動。不幸的是我得到它滾動，但滾動條是很長的路要走。

我只是想滾動到內容的長度。

演示在http://jsfiddle.net/d16uh70k/

CSS

#RTCChatContainer 
    { 
     /*overflow: auto;*/ 
     overflow-x: scroll; 
     overflow-y: hidden; 
     height: 152px; 
     width: 100%; 
     border: 1px dashed blue; 
    } 

    #RTCChat 
    { 
     display: block; 
     height: 122px; 
     width: 600%; 
     max-width: 600%; 
     border: 1px dashed red; 
    } 

     #RTCChat video 
     { 
      display: inline-block; 
      border: 1px solid black; 
     } 

HTML

<div id="ContentWrapper" class="row"> 
     <div class="col-sm-4"> 



     </div> 
     <div class="col-sm-8"> 

      <div id="RTCChatContainer"> 
       <div id="RTCChat"><video id="RTCMyVideo" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf0" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf1" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf2" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf3" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf4" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf5" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf6" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf7" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf8" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf9" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video></div> 
      </div> 


     </div> 
    </div> 
    <footer></footer> 
</div> 

Answer 1

更改#RTCChat以下幾點：http://jsfiddle.net/55z6tnL0/。

#RTCChat { 
    height: 122px; 
    white-space: nowrap; 
}