AntD 5中混合使用表单横竖布局的实现方法问询

方案一：用Form.Item自带属性实现（推荐） #

AntD 5的Form.Item支持单独配置布局，不用额外写CSS就能实现需求。给目标行的每个Form.Item设置layout="horizontal"，再配合Row组件让它们横向排列：

<Row className="horizontal-override" gutter={16}>
  <Form.Item 
    name="Available" 
    label="Available" 
    valuePropName="checked"
    layout="horizontal"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
  >
    <Checkbox onChange={onInputChange} />
  </Form.Item>
  <Divider type="vertical" />
  <Form.Item 
    name="ShipHomeOnly" 
    label="ShipHome Only" 
    valuePropName="checked"
    layout="horizontal"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
  >
    <Checkbox onChange={onInputChange} />
  </Form.Item>
  {/* 更多复选框项 */}
</Row>

这种方式完全贴合AntD 5的设计规范，还能通过labelCol和wrapperCol精确控制标签与复选框的占比，gutter属性可以调整项之间的间距。

方案二：自定义CSS覆盖（适配AntD 5类名） #

如果习惯用之前的CSS覆盖思路，因为AntD 5的表单DOM结构和类名有变化，需要调整选择器：

/* 适配AntD 5的样式覆盖 */
.ant-form {
  .horizontal-override {
    display: flex;
    align-items: center;
    gap: 16px; /* 控制项之间的间距 */

    .ant-form-item {
      margin-bottom: 0; /* 去掉垂直布局默认的底部间距 */
      flex-direction: row;

      .ant-form-item-label {
        display: flex;
        align-items: center;
        height: 32px;
        margin-right: 8px;
        padding: 0;
      }

      .ant-form-item-control {
        flex: none;
      }
    }
  }
}

关键调整说明： #

• AntD 5把表单标签和内容拆成了.ant-form-item-label和.ant-form-item-control容器，替换了之前直接选中label的写法
• 给.horizontal-override加display: flex，让内部的Form.Item横向排列
• 去掉Form.Item默认的margin-bottom，避免垂直间距破坏布局

表单代码可以保持你之前的结构不变：

<Row className="horizontal-override">
  <Form.Item name="Available" label="Available" valuePropName="checked">
    <Checkbox onChange={onInputChange} />
  </Form.Item>
  <Divider type="vertical" />
  <Form.Item name="ShipHomeOnly" label="ShipHome Only" valuePropName="checked">
    <Checkbox onChange={onInputChange} />
  </Form.Item>
  {/* 更多复选框项 */}
</Row>

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