在 Ant Design 5 垂直表单中，为局部区域（如复选框组）单独启用水平排列，需绕过全局 layout 限制，通过精准覆盖新增 DOM 结构（如 .ant-form-item-row）并结合 !important 保障样式优先级来实现。
在 ant design 5 垂直表单中，为局部区域（如复选框组）单独启用水平排列，需绕过全局 layout 限制，通过精准覆盖新增 dom 结构（如 `.ant-form-item-row`）并结合 `!important` 保障样式优先级来实现。
Ant Design 5 对表单内部 DOM 结构进行了重构，相比 v4 新增了 <div class="ant-form-item-row"> 容器节点，导致原有针对 .ant-form-item 的 CSS 覆盖失效。若你希望在一个整体为 layout="vertical" 的表单中，仅对某一行复选框（例如“Available”“ShipHome Only”等）恢复类似水平布局的紧凑对齐效果，不能再依赖旧版 .horizontal-override .ant-form-item 规则，而必须深入到更底层的渲染结构。
✅ 推荐解决方案：精准定位 + 强制样式
以下 CSS 可直接嵌入项目样式文件（或 style 标签），适配 Ant Design 5.9+：
/* 为指定行启用水平对齐 */
.horizontal-override > .ant-form-item {
flex-direction: inherit !important;
}
.horizontal-override > .ant-form-item .ant-form-item-row {
display: inline-flex !important;
height: 32px !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
.horizontal-override > .ant-form-item .ant-form-item-label label {
display: inline-flex !important;
margin-right: 8px !important;
align-items: center !important;
height: 32px !important;
padding: 0 !important;
}
.horizontal-override > .ant-form-item .ant-form-item-control-input {
margin-top: 0 !important;
min-height: auto !important;
}? 配套 JSX 写法（保持语义清晰）
无需修改逻辑，仅需为目标行添加 className="horizontal-override"，并确保 Form.Item 独立包裹每个 Checkbox（不推荐用 Checkbox.Group——因其默认内联布局不可控，且与 Form.Item 的 label 绑定逻辑冲突）：
<Form layout="vertical">
{/* 其他垂直排列的表单项 */}
<Form.Item label="基础设置" />
{/* 【关键】需要水平对齐的复选框行 */}
<Row className="horizontal-override">
<Form.Item
name="Available"
label="Available"
valuePropName="checked"
style={{ marginBottom: 0 }}
>
<Checkbox onChange={onInputChange} />
</Form.Item>
<Divider type="vertical" style={{ height: '32px', margin: '0 12px' }} />
<Form.Item
name="ShipHomeOnly"
label="ShipHome Only"
valuePropName="checked"
style={{ marginBottom: 0 }}
>
<Checkbox onChange={onInputChange} />
</Form.Item>
<Form.Item
name="RequireSignature"
label="Require Signature"
valuePropName="checked"
style={{ marginBottom: 0 }}
>
<Checkbox onChange={onInputChange} />
</Form.Item>
</Row>
{/* 后续继续垂直布局 */}
<Form.Item label="备注">
<Input.TextArea />
</Form.Item>
</Form>⚠️ 注意事项与最佳实践
- 避免滥用 !important：虽然当前是绕过 AntD 5 CSS-in-JS 高优先级样式的最稳妥方式，但建议将该样式封装为独立 SCSS 文件（如 _form-mix-layout.scss），并通过 :global 或 CSS Modules 控制作用域，降低全局污染风险；
- 响应式兼容：若需在小屏下自动切回垂直堆叠，可结合 @media (max-width: 768px) 重置 .horizontal-override 内部样式；
- 替代思路（无 CSS 覆盖）：若项目允许，也可将该复选框组抽离为独立 Form 组件（layout="horizontal"），通过 formInstance 与主表单联动，但会增加状态同步复杂度；
- Divider 使用提示：<Divider type="vertical"/> 在 inline-flex 容器中需显式设置高度与 margin，否则易塌陷或错位。
? 总结：Ant Design 5 的样式体系更强调封装性与一致性，局部样式定制需“向下穿透”至真实 DOM 节点。掌握 .ant-form-item-row 这一关键容器，配合合理 !important 与 inline-flex 布局控制，即可在垂直主基调下，灵活、稳定地实现任意表单项的混合排版需求。
