TDesign表单中按钮和输入框间距不一致，如何按规范对齐？

玉茂酱~ 提问于 2026-01-26 22:54:26 阅读 38

组件

在用TDesign做表单布局时，输入框和按钮之间的间距总感觉不对劲。比如下面这段代码，输入框和按钮用了同样的margin，但实际看起来垂直间距明显不一致：



  
  提交

按照TDesign的设计规范应该怎样调整间距？试过把margin改成theme.config.js里定义的变量，但效果还是不理想。是不是哪里没按规范来？

我来解答赞 5 收藏

反馈

2 条解答

Mr-恩希 Lv1

应该是表单控件的上下间距没有统一。TDesign的表单组件默认使用margin-bottom: 20px对齐，建议用tdesign-form包裹控件，或者手动给输入框和按钮统一设置margin-bottom: 20px即可对齐。

代码如下：



  

  提交

2026-02-07 10:18

诸葛淑怡 Lv1

直接上懒人方案：别折腾margin了，用TDesign自带的formColProps或者FormItem的栅格布局功能来控制间距，统一整个表单的布局节奏。比如这样：

<Form.Item label="输入框" formColProps={{ span: 8 }}>

  <Input />

</Form.Item>

<Form.Item formColProps={{ span: 8, offset: 2 }}>

  <Button>提交</Button>

</Form.Item>

按规范走栅格系统，间距自然就对齐了，省心。

2026-01-29 16:00