当调整窗口大小时，防止元素换行

Question

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

我希望正方形保持原位置，但每次我调整窗口大小时，它们都会被推下并隐藏。

目前这个示例可以正常工作，但解决方案太过荒谬。

是否有更“简洁”的方法或如何使其看起来更专业？

我的JSFiddle示例

.content {
    width: 100000000px;
}

- Jon Lamer

Answer 1

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

由于这些元素是inline-block，您可以使用white-space:nowrap来防止它们换行。如果不需要此效果，则可以将其删除。

jsFiddle示例

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

- Josh Crozier

---

这是最佳解决方案，但空格不支持浮动元素。 - Marcos Eusebi

@MarcosEusebi 对的 - 它们必须是 inline 元素。 - Josh Crozier

Answer 2

http://jsfiddle.net/CLErY/2/

/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */
.content {
    width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */
}

.content应该至少具有整个元素加上一个子元素（100px）的大小，因此200％是双倍大小，它应该有效。

如果我们有4个正方形，则大小应为（宽度x4 +宽度），如果正方形的宽度为100，则结果为500px。

此外，这是为了使溢出消失更加平滑，但不是必需的。

希望它有所帮助。

- Marcos Eusebi