javascript - 使div元素并排显示

Question

我的设计中有两个问题。

超出父元素宽度的

1. div 元素将换行到下一行。 (我希望它们在一条直线上) 我尝试了显示内联、 block 、内联 block ，但没有成功

2. 我无法隐藏内容 div 之外的 div。我已经将溢出:隐藏了，但仍然有问题。

主要问题是，我需要拇指支架的总宽度(#thumb_hs)来设置可拖动的限制。因此，当我拖动时，它只会拖动到第一行 div。

编辑:第一个问题已经解决。感谢大卫·托马斯。 通过更改 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 .