如何設置 layout=&quot;horizo​​ntal&quot; 里面的幾個<Form.Item>同時保持<Form layout="vertical">在螞蟻設計中

Question

我有一個<Form>有 layout="vertical" 但在這個 Form 里面我想設置一些項目有 layout="horizo​​ntal"。

我嘗試了在同一行中顯示<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 一起使用。

Answer 1

我刪除了父<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>

Answer 2

為了解決這個問題，我創建了兩個類並將它們應用在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>