javascript - 让 div 元素并排显示

Question

我的设计有两个问题。

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

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

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

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

Answer 1

要强制不包装，您可以white-space: nowrap;在父元素上使用，但这需要将子元素display设置为inlineor inline-block（使用float将导致元素 wrap）：

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

.contained {
    display: inline-block;
}

JS 小提琴演示。

显然，添加overflow-x: scroll;到#container元素允许您滚动到其他元素（如果您想要优雅降级）：JS Fiddle 演示。