调整浏览器窗口缩小时如何让按钮始终保持同一行不换行布局

现有代码换行原因 #

• 原代码使用float: left实现按钮横排，浮动元素默认会在父容器宽度不足时自动换行
• 父容器.category设置50%固定宽度，视口缩小时父容器实际可用宽度同步缩小，所有按钮总宽度超过父容器阈值时就会触发换行
• 未重置浏览器默认给按钮添加的外边距、内边距，额外挤占可用空间，会提前触发换行

优化代码（推荐Flex布局，适配绝大多数现代浏览器） #

替换原有CSS即可生效，HTML无需修改： #

.category {
    position: relative;
    width: 50%;
    /* *核心强制同行属性* */
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem; /* 统一设置按钮间距，替代float方案需要的外边距 */
    /* 可选：父容器宽度不足时开启横向滚动，避免按钮被挤压变形 */
    overflow-x: auto;
}
.category button {
    background-color: #3c3c3c;
    border-color: #3c3c3c;
    color: #ebebeb;
    border-radius: 0.3rem;
    transition: all 0.2s ease 0s;
    /* 删除原有float: left样式 */
    margin: 0; /* 重置按钮默认外边距 */
    padding: 0.4rem 0.8rem; /* 统一按钮内边距，避免默认尺寸过大 */
    white-space: nowrap; /* 禁止按钮内部文字换行 */
    flex-shrink: 0; /* 禁止按钮被自动压缩，保持原有尺寸 */
}

可直接复用的HTML代码： #

<div class="category">
    <button>ALL</button>
    <button>SOFA</button>
    <button>CHAIR</button>
    <button>BED</button>
    <button>LAMP</button>
    <button>ACCESSORIES</button>
</div>

旧浏览器兼容方案 #

如果需要适配IE等低版本浏览器，可保留float布局，补充如下属性：

.category {
    position: relative;
    width: 50%;
    overflow: hidden; /* 触发BFC，避免浮动导致的高度塌陷 */
    white-space: nowrap; /* 强制行内元素不换行 */
}
.category button {
    /* 保留原有所有样式 */
    float: left;
    margin: 0;
    white-space: nowrap;
}

内容的提问来源于stack exchange，提问作者احمد المحمد