如何在React的Ant Design Form中实现指定布局？已尝试suffix但未成功

你尝试的suffix属性更适合放置小图标或短文本，对于示例图中这种和输入框等高的附属区块，推荐用以下两种方式实现：

方法一：使用Input.Group组合布局 #

利用Ant Design的Input.Group组件实现元素紧密排列，确保视觉上的统一性：

import { Form, Input, Typography } from 'antd';
const { Text } = Typography;

const DemoForm = () => {
  return (
    <Form layout="horizontal">
      <Form.Item label="目标字段" name="targetField">
        <Input.Group compact>
          <Input style={{ flex: 1 }} placeholder="请输入内容" />
          <Text style={{ 
            padding: '0 12px', 
            backgroundColor: '#f5f5f5', 
            display: 'flex', 
            alignItems: 'center',
            border: '1px solid #d9d9d9',
            borderLeft: 'none',
            borderRadius: '0 4px 4px 0'
          }}>元/小时</Text>
        </Input.Group>
      </Form.Item>
    </Form>
  );
};

export default DemoForm;

• Input.Group compact会让子元素无缝衔接
• 给Input设置flex:1让它占满剩余宽度
• 右侧文本块设置和输入框一致的边框、背景色，保证高度对齐

方法二：自定义Flex容器 #

如果需要更灵活的样式控制，直接用flex布局手动组合元素：

import { Form, Input, Typography } from 'antd';
const { Text } = Typography;

const DemoForm = () => {
  return (
    <Form layout="horizontal">
      <Form.Item label="目标字段" name="targetField">
        <div style={{ display: 'flex', width: '100%' }}>
          <Input 
            style={{ 
              flex: 1, 
              borderRight: 'none', 
              borderRadius: '4px 0 0 4px' 
            }} 
            placeholder="请输入内容" 
          />
          <Text style={{ 
            padding: '0 12px', 
            backgroundColor: '#f5f5f5', 
            display: 'flex', 
            alignItems: 'center',
            border: '1px solid #d9d9d9',
            borderLeft: 'none',
            borderRadius: '0 4px 4px 0'
          }}>元/小时</Text>
        </div>
      </Form.Item>
    </Form>
  );
};

export default DemoForm;

• 外层flex容器确保两个元素在一行排列
• 手动调整输入框和文本块的边框、圆角，让它们视觉上成为一个整体

这两种方式都能完美实现示例图的布局效果，比suffix更适合这种场景。

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