如何设置 layout=&quot;horizo​​ntal&quot; 里面的几个<Form.Item>同时保持<Form layout="vertical">在蚂蚁设计中

Question

I have a <Form> which has layout="vertical" but inside this Form I want to set some items to have layout="horizontal".

I tried <Input.Group compact> which displayed <Form.Item> in the same row but I also want the label "TestLabel" of the <Form.Item> and <Input/> box in the single row.

           <Form
            layout="vertical"
            size="medium"
           >
                 <Input.Group compact>
                          <Form.Item label={product.productName + " : "} />
                        <Form.Item label={"TestLabel"} >
                             <Input />
                        </Form.Item>
                 </Input.Group>
          </Form>

However "TestLabel" and Input box is aligned vertically but I want it horizontally aligned. I'm using React with Ant Design.

Answer 1

I removed parent <Form.Item> and set the label in addonBefore={"TestLabel"} in <Input/> which aligned label and <Input> horizontally. Here's the updated code.

      <Form
        layout="vertical"
        size="medium"
       >
             <Input.Group compact>
                 <Form.Item label={product.productName + " : "} />
                 <Input addonBefore={"TestLabel"}  style={{ width:"34%" }} />
             </Input.Group>
      </Form>

Answer 2

To solve this problem I created two classes and applied them at Form.Item and at Input

In your css:

.classA {
  display: flex;
  flex-direction: row;
}

.classB {
  margin-left: 10px;
}

In you html:

<Form
  layout="vertical"
  size="medium"
>
  <Form.Item
    name='input-name'
    label='input-label'
    className='classA '
  >
    <InputNumber className='classB' />
  </Form.Item>
</Form>