让 div 元素并排显示

Question

我的设计有两个问题。

1. div 超出父元素宽度的元素被换行到下一行。 （我希望他们在一条直线上） 我试过显示内联，块，内联块，没有运气

2. 我无法隐藏内容 div 之外的 div。我已经把溢出：隐藏了，但还是有问题。

主要问题是，我需要拇指托的总宽度（#thumb_hs）来设置可拖动的限制。所以当我拖动时，它只会拖动到第一行 divs。

编辑：第一个问题解决了。感谢大卫托马斯。 另一个问题是通过更改 javascript 参数解决的。

Answer 1

要强制不换行，您可以在父元素上使用white-space: nowrap;，但这需要将子元素上的display 设置为inline 或inline-block（使用float will cause the elements to wrap）：

#container {
    white-space: nowrap;
    /* other stuff */
}

.contained {
    display: inline-block;
}

JS Fiddle demo.

将overflow-x: scroll; 添加到#container 元素显然可以让您滚动到其他元素（如果您想要优雅降级）：JS Fiddle demo。