javascript - 使用滚动条防止 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 会移动到下一行。但是我希望它们在 1 行中，因为它们是 inline-block

Answer 1

您缺少用于容器元素的万能的 white-space: nowrap 语句。

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