如何将垂直滚动的Tile布局按钮改为仅支持水平滚动？

要实现水平滚动的Tile布局，只需调整容器的滚动属性和按钮的排列逻辑，以下是修改后的完整代码：

<style>
.tile-button {
    width: 200px; /* 改用固定宽度，避免占满容器宽度导致无法横向排列 */
    height: 100px;
    background-color: lightblue;
    border: solid 1px gray;
    white-space: normal;
    margin: 0px; /* 修复原代码拼写错误：maring → margin */
    display: inline-block; /* 让按钮横向排列 */
    vertical-align: top; /* 消除按钮间的垂直间距 */
    font-size: 16px; /* 单独设置字体大小，避免继承容器的font-size:0 */
}
</style>

<body style="margin: 0;">
<!-- 调整容器滚动属性，开启横向滚动并禁用垂直滚动 -->
<div style="width:100%;height:300px;background-color: coral;overflow-x: scroll;overflow-y: hidden;white-space: nowrap;font-size:0px;">
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
</div>
</body>

核心修改说明： #

• 容器设置：将overflow-y: scroll替换为overflow-x: scroll; overflow-y: hidden，开启横向滚动并禁用垂直滚动；保留white-space: nowrap确保按钮不会自动换行。
• 按钮调整：
  • 把百分比宽度改为固定值（如200px），避免按钮占满容器宽度；
  • 添加display: inline-block实现横向排列；
  • 用vertical-align: top消除按钮间的默认垂直间隙；
  • 修复原代码的maring拼写错误；
  • 单独设置按钮字体大小，避免继承容器的font-size:0导致文字消失。

如果偏好更简洁的Flex布局方案，也可以这样实现：

<style>
.tile-button {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: solid 1px gray;
    white-space: normal;
    margin: 0px;
    font-size: 16px;
}
.scroll-container {
    width:100%;
    height:300px;
    background-color: coral;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    gap: 0; /* 消除按钮间的默认间隙 */
}
</style>

<body style="margin: 0;">
<div class="scroll-container">
    <button class="tile-button">Title</button>
    <button class="tile-button">Title</button>
    <!-- 其余按钮省略 -->
</div>
</body>

Flex布局无需处理white-space和inline-block的间距问题，直接通过display:flex让子元素横向排列，容器开启横向滚动即可。

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