使用滚动条防止div出现新字符串

Question

I have a div with some image div in it.

<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 The problem is that divs that doesn't suit it's width, move to next line. However I expect them to be in 1 line because they are inline-block

Answer 1

You're missing the almighty white-space: nowrap statement for your container element.

Demo: http://jsfiddle.net/575ora3r/1/