使用滚动条防止新字符串中的div

Question

我有div，其中包含一些图片div。

<div class="sliderscrollbar">
    <div class="scrollableimage"></div>
    <div class="scrollableimage"></div>
    <div class="scrollableimage"></div>
    <div class="scrollableimage"></div>
    <div class="scrollableimage"></div>
    <div class="scrollableimage"></div>
</div>

div.sliderscrollbar
{
    display: inline-block;
    width: 900px;
    height: 200px;
    overflow-x: scroll; 
}
div.scrollableimage
{
    display: inline-block;
    width: 200px;
    height: 120px;
    background: url('http://www.selectism.com/files/2014/12/Holiday-Gift-Guide-Stocking-Stuffers-feature-200x120.jpg') no-repeat;
}

Fiddle here 问题是div不适合它的宽度，移动到下一行。但是我希望它们在一行中，因为它们是inline-block

Answer 1

您错过了容器元素的全能white-space: nowrap语句。

演示：http://jsfiddle.net/575ora3r/1/