React中使用div无法让筛选按钮同一行显示的解决方法

筛选按钮代码

import React from "react";

function FilterButton(props){
    return (   
        <div className="box">    
        <button 
            type = "submit"
            className="button is-info"
            onClick={()=>props.setFilter(props.name)}
        >
            <span>{props.name}</span>   
        </button>
        </div>
    );
}

export default FilterButton;

当前结构下，div标签无法将全部、活跃、已完成、重要这几个筛选按钮排列在同一行，针对这个问题的原因和解决方案如下：

出现这个问题的核心逻辑非常明确：每个FilterButton组件返回的最外层是默认块级属性的<div className="box">，块级元素天生会独占一行渲染，多个组件依次渲染时，每个外层div都会纵向占满整行，自然无法形成横向排列的效果。

具体可选择的解决方案：

• 最常用的灵活方案：给渲染所有筛选按钮的上层包裹容器添加弹性布局，完全不需要修改单个FilterButton的内部结构。只需要给包裹所有FilterButton的元素新增类名（比如filter-group），添加对应CSS：

  .filter-group {
    display: flex;
    gap: 8px; /* 自定义按钮之间的横向间距，可根据设计需求调整数值 */
  }
  

  弹性容器会默认将所有直接子元素沿水平主轴排列，就算子元素是块级div，也会被强制排布在同一行，后续新增筛选按钮时也能自动适配横向排列效果。
• 低改动量方案：直接修改每个FilterButton外层.box类div的显示属性，将块级元素改为行内块元素，让其不再独占整行：

  .box {
    display: inline-block;
  }
  

  修改完成后，每个div会根据自身宽度横向排列在同一行，后续只需要调整margin或间距值优化视觉效果即可。
• 更合理的组件优化方案：移除每个FilterButton外层冗余的div包裹，将.box类的样式直接绑定到button元素上。这种写法减少了不必要的DOM嵌套，而按钮作为原生行内元素，配合上层容器很容易实现横向排列效果，也更符合React组件的轻量设计思路。

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