如何让按钮向右溢出并支持横向滚动（避免容器内换行）

当前实现了如图所示的效果，希望按钮不会在div容器内换行，以下是相关代码：

#floatingRectangle {
    z-index: 10;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100px;
    background-color: #fff;
    color: black;
    padding: 8px;
    overflow-x: scroll;
}

<div id="floatingRectangle">
<form action="edit.php" method="POST">
<input type="submit" name="pageSubmit" value="Prev">
<input type="submit" name="pageSubmit" value="Next">
.. etc
</form>
</div>

解决方案 #

给form元素添加white-space: nowrap样式，就能让内部按钮保持在同一行不换行：

#floatingRectangle form {
    white-space: nowrap;
    margin: 0; /* 清除form默认外边距，避免布局偏移 */
}

原理：white-space: nowrap会强制元素内的内容不自动换行，配合容器的overflow-x: scroll，当按钮总宽度超过容器时，会出现横向滚动条而不会换行。

内容的提问来源于stack exchange，提问作者GeneCode