html - 调整窗口大小时防止元素换行

Question

如何防止我的正方形在调整窗口大小时换行？

我希望方 block 保持在它们的位置，但每次我调整窗口大小时，它们都会被向下推并隐藏起来。

这个例子目前正在运行，但是使这成为可能的解决方案是荒谬的。

有没有一种“更干净”的方式或者我怎样才能让它看起来更专业？

My JSFiddle Example

.content {
    width: 100000000px;
}

Answer 1

从父元素中移除 position:absolute 和 overflow:hidden。

由于元素是 inline-block，您可以使用 white-space:nowrap 来防止它们换行。如果这不是预期的效果，请将其删除。

jsFiddle example

#container {
    width: 100%;
    height: 100px;
    white-space:nowrap;
}
.square {
    display: inline-block;
    width: 100px;
    height: 100px;
}