如何将Antd Form.Item的标签显示在输入字段右侧？

方法一：单个Form.Item快速调整（Flex布局） #

直接通过内联样式用Flex布局反转标签与控件的排列顺序，同时保证垂直居中：

<Form.Item
  name="isPickup"
  label={t("booking.field.isPickup")}
  colon={false}
  valuePropName="checked"
  style={{ display: "flex", flexDirection: "row-reverse", alignItems: "center", gap: 8 }}
>
  <Switch />
</Form.Item>

flexDirection: "row-reverse"会直接调换标签和控件的位置，alignItems: "center"让两者垂直对齐，gap用来控制间距，按需调整数值即可。

方法二：批量/全局样式调整（CSS类） #

如果多个Form.Item都需要这个效果，用自定义CSS类更高效：

1. 给目标Form.Item添加类名：

<Form.Item
  name="isPickup"
  label={t("booking.field.isPickup")}
  colon={false}
  valuePropName="checked"
  className="label-right"
>
  <Switch />
</Form.Item>

2. 编写CSS样式：

.label-right .ant-form-item-label {
  order: 2; /* 让标签排在控件之后 */
}
.label-right .ant-form-item-control {
  order: 1; /* 让控件排在标签之前 */
  margin-right: 8px; /* 调整控件与标签的间距 */
}

关键说明 #

你之前设置的labelAlign="right"只是控制标签内部文本的对齐方式（比如标签文字靠右显示），并不会改变标签和输入控件的位置顺序，这就是设置后未达预期的原因。要调换两者位置，需要调整元素的排列顺序而非文本对齐。

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