滚动条在主div来在它

Question

我建立一个网站，是只有640像素宽显示div的，我有，我想飘起了数量的div并有滚动条的DIV出现在下方，以便用户可以向左滚动有权查看不同的divs。

http://jsfiddle.net/nNG64/1/

HTML

<div id="all-videos"> 
    <div class="video-item">Video one</div> 
    <div class="video-item">Video two</div> 
    <div class="video-item">Video three</div> 
</div> 

CSS

#all-videos { 
    width: 640px; 
    height: 300px; 
    overflow: scroll; 
    border:1px solid red; 
    background: #000; 
} 

.video-item { 
    float: left; 
    background: #eee; 
    border:1px solid #000; 
    width: 500px; 
    padding: 20px; 
    height: 280px; 
} 

的一个时间我想显示滚动条是去水平，我不能，但我不希望一个......它发现自己在那里被调试:)

附加的是一个屏幕证明的镜头，我将不得不风格滚动条，但这不应该是一个问题，我只需要得到这个工作。

Answer 1

1. 使用overflow-x:scroll和overflow-y:hidden为#all-videos
2. 包裹内#all-videos视频的东西，有一个宽度大于#all-videos更大，否则，内容将突破到下一行：

html

<div id="all-videos"> 
    <div class="video-wrapper"> 
     <div class="video-item">Video one</div> 
     <div class="video-item">Video two</div> 
     <div class="video-item">Video three</div> 
    </div> 
</div> 

CSS

#all-videos { 
width: 640px; 
height: 300px; 
overflow-x: scroll; 
overflow-y: hidden; 
border:1px solid red; 
background: #000; 
} 
.video-wrapper { 
width:1626px; 
} 
.video-item { 
float: left; 
background: #eee; 
border:1px solid #000; 
width: 500px; 
padding: 20px; 
height: 280px; 
}