Html 在调整窗口大小时防止图元换行

调整窗口大小时，如何防止正方形缠绕

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

这个例子目前正在发挥作用，但使之成为可能的解决方案是荒谬的

有没有一种“更干净”的方法，或者如何让它看起来更专业

---

从父元素中删除

position:absolute

和

overflow:hidden

由于元素是

内联块

，因此可以使用

空白：nowrap

来防止它们被包装。如果这不是想要的效果，尽管移除它

.内容的大小至少应为整个元素的大小加上一个子元素的大小（100px），因此200%是双倍，应该可以工作

如果我们有4个正方形，那么大小应该是（宽度x 4+宽度），如果正方形的宽度是100，那么结果是500px

此外，这是为了提供更平滑的溢出，但不是必要的

---

希望有帮助。

这是最好的解决方案，但空格不支持浮点元素。@MarcosEusebi Right-它们必须是

内联

元素。

.content {
    width: 100000000px;
}

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

/* 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. */
}