🐛[BUG]结构化列表 ProFormList 只读模式下，第二行开始对齐方式不对

[Pinparker]

🐛 bug 描述

📷 复现步骤

结构化列表 ProFormList 只读模式下，第二行开始对齐方式不对

🏞 期望结果

ProFormList 只读模式下，无论多少行，数据名称可以与数据值对齐

© 版本信息

• ProComponents 版本 :@ant-design/pro-components@2.8.6

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🐛[BUG]结构化列表 ProFormList 只读模式下，第二行开始对齐方式不对 #9398][🐛[BUG]结构化列表 ProFormList 只读模式下，第二行开始对齐方式不对][100%]

[dosubot]

这个问题已经在社区和 GitHub issue 中被确认（#9398）。根本原因是 ProFormList 在只读模式下不会渲染外层的容器 div（负责宽度和对齐的样式），只渲染每一行的内容，导致第二行开始 label 和 value 对不齐。代码层面可以参考 ListContainer.tsx。

目前没有官方一键修复方案，社区常用的视觉对齐 workaround 有：

• 给 ProFormList 传递 containerClassName 或 containerStyle，手动调整 margin、padding、宽度等；
• 用 itemRender 或 itemContainerRender 包裹每一行，比如用 Ant Design 的 Row 组件模拟 grid 布局：

<ProFormList
  name="list"
  label="列表"
  itemContainerRender={dom => (
    <Row gutter={8} style={{ marginBottom: 8 }}>
      {dom}
    </Row>
  )}
  containerStyle={{ marginBottom: 24 }}
>
  <ProFormText name="field" label="字段" />
</ProFormList>

• 直接设置 containerClassName="ant-row" 也可以：

<ProFormList
  name="list"
  label="列表"
  containerClassName="ant-row"
>
  <ProFormText name="field" label="字段" />
</ProFormList>

这些方法只是视觉上的 workaround，底层实现暂时没有官方修复。建议关注 相关讨论 和 issue 跟进后续进展。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}