如何实现单选按钮容器固定宽度下横向滚动而非自动换行？

问题分析 #

设置容器宽度后单选按钮自动换行而非横向滚动，核心原因是：

• 容器未强制内部元素保持单行排列
• overflow属性设置错误，未开启横向滚动支持

修改后的CSS代码 #

SCSS版本 #

.page_selector {
    background-color: red;
    position: absolute;
    bottom: -10px;
    overflow-x: auto; /* 横向超出时显示滚动条 */
    overflow-y: hidden; /* 纵向隐藏溢出内容 */
    margin-left: 60%;
    width: 160px;
    white-space: nowrap; /* 强制内部元素不换行 */
    height: 40px; /* 固定容器高度，避免内容撑开高度 */
    padding-top: 5px; /* 可选：调整内边距让内容垂直居中 */

    .ps_item {
        margin-left: 15px;
        display: inline-block;
        
        label {
            display: block;
        }

        /* 可选：去掉第一个元素的左边距，避免容器左侧留白 */
        &:first-child {
            margin-left: 0;
        }
    }
}

普通CSS版本 #

.page_selector {
    background-color: red;
    position: absolute;
    bottom: -10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: 60%;
    width: 160px;
    white-space: nowrap;
    height: 40px;
    padding-top: 5px;
}
.ps_item {
    margin-left: 15px;
    display: inline-block;
}
.ps_item label {
    display: block;
}
/* 可选：去掉第一个元素左边距 */
.ps_item:first-child {
    margin-left: 0;
}

关键修改说明 #

• white-space: nowrap：强制容器内的inline-block元素始终保持在同一行，不会自动换行
• overflow-x: auto：当容器内容宽度超过设置的160px时，自动显示横向滚动条；overflow-y: hidden确保纵向不会出现滚动条或溢出
• 固定容器height：避免内容原本换行导致的容器高度变化，保持布局稳定
• 可选的:first-child样式：修正第一个选项的左边距，让容器内元素排列更紧凑

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