![](/img/trans.png)
[英]How to iteratively add Form.Item in Form.Item in ant design Form
[英]How to set the layout="horizontal" inside for few <Form.Item> while keeping <Form layout="vertical"> in ant design
我有一个<Form>
有 layout="vertical" 但在这个 Form 里面我想设置一些项目有 layout="horizontal"。
我尝试了在同一行中显示<Form.Item>
<Input.Group compact>
但我也希望<Form.Item>
和<Input/>
框的标签“TestLabel”在单行中。
<Form
layout="vertical"
size="medium"
>
<Input.Group compact>
<Form.Item label={product.productName + " : "} />
<Form.Item label={"TestLabel"} >
<Input />
</Form.Item>
</Input.Group>
</Form>
但是“TestLabel”和输入框垂直对齐,但我希望它水平对齐。 我正在将 React 与 Ant Design 一起使用。
我删除了父<Form.Item>
并在<Input/>
中的addonBefore={"TestLabel"}
中设置标签,该标签水平对齐标签和<Input>
。 这是更新后的代码。
<Form
layout="vertical"
size="medium"
>
<Input.Group compact>
<Form.Item label={product.productName + " : "} />
<Input addonBefore={"TestLabel"} style={{ width:"34%" }} />
</Input.Group>
</Form>
为了解决这个问题,我创建了两个类并将它们应用在Form.Item
和Input
在你的 css 中:
.classA {
display: flex;
flex-direction: row;
}
.classB {
margin-left: 10px;
}
在你的html中:
<Form
layout="vertical"
size="medium"
>
<Form.Item
name='input-name'
label='input-label'
className='classA '
>
<InputNumber className='classB' />
</Form.Item>
</Form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.