前端 ----form表单对齐处理

<FormRowDiv>

<div style={{ display: 'flex', gap: 24 }}>

<Form.Item

label={<span>项目名称<span style={{ marginRight: 93 }}></span></span>}

name="projectName"

layout="horizontal"

rules={[{ required: true, message: '请输入项目名称' }]}

labelCol={{ span: 11 }}

wrapperCol={{ span: 13 }}

style={{ marginBottom: 19, width: 365 }}

>

<Input placeholder="请输入项目名称" maxLength={18} />

</Form.Item>

<Form.Item

label={<span>建设单位<span style={{ marginRight: 103 }}></span></span>}

name="buildClient"

layout="horizontal"

labelCol={{ span: 11 }}

wrapperCol={{ span: 13 }}

style={{ marginBottom: 19, width: 380 }}

>

<Input placeholder="请输入建设单位" maxLength={18} />

</Form.Item>

</div>

<div style={{ display: 'flex', gap: 24 }}>

<Form.Item

label={<span>&nbsp;&nbsp;&nbsp;项目编号<span style={{ marginRight: 93 }}></span></span>}

name="projectNum"

rules={[{ required: false, message: '请输入项目编号' }]}

layout="horizontal"

labelCol={{ span: 11 }}

wrapperCol={{ span: 13 }}

style={{ marginBottom: 19, width: 365 }}

>

<Input placeholder="请输入项目编号" maxLength={18} />

</Form.Item>

<Form.Item

label={<span>变压器设计序号<span style={{ marginRight: 93 }}></span></span>}

name="transformerModel"

initialValue={'SCB14'}

rules={[{ required: false, message: '请选择变压器设计序号' }]}

layout="horizontal"

labelCol={{ span: 11 }}

wrapperCol={{ span: 13 }}

style={{ marginBottom: 19, width: 380 }}

>

<Select>

<Option value="SCB13">SCB13</Option>

<Option value="SCB14">SCB14</Option>

</Select>

</Form.Item>

</div>

<div style={{ display: 'flex', gap: 24 }}>

<Form.Item

label={<span>&nbsp;&nbsp;&nbsp;消防负荷开关保护模式</span>}

name="fireProtectionMode"

initialValue={"1"}

layout="horizontal"

rules={[{ required: false, message: '请选择消防负荷开关保护模式' }]}

labelCol={{ span: 11 }}

wrapperCol={{ span: 13 }}

style={{ marginBottom: 19, width: 365 }}

>

<Select>

<Option value="1">电磁</Option>

<Option value="2">电子式</Option>

</Select>

</Form.Item>

<Form.Item

label={<span>非消防负荷开关保护模式<span style={{ marginRight: 93 }}></span></span>}

name="nonFireProtectionMode"

initialValue={"1"}

layout="horizontal"

labelCol={{ span: 11 }}

wrapperCol={{ span: 13 }}

rules={[{ required: false, message: '请选择非消防负荷开关保护模式' }]}

style={{ marginBottom: 19, width: 380 }}

>

<Select>

<Option value="1">热磁</Option>

<Option value="2">电子式</Option>

</Select>

</Form.Item >

</div>

<div style={{ display: showNotes ? 'block' : 'none', marginTop: 20 }}>

<div style={{ textAlign: 'left', fontWeight: 400, marginBottom: 10, fontSize: 12, color: ' rgba(51, 51, 51, 1)' }}>图纸说明:</div>

<div style={{ marginTop: 10, display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>

{itemDatas?.map((data, index) => (

<div key={index} style={{ display: 'flex' }}>

<Form.Item>

<span style={{

marginRight: 10,

textAlign: 'center',

fontSize: 14,

color: 'rgba(0, 0, 0, 1)',

fontWeight: 400

}}>

{index + 1}

</span>

</Form.Item>

<Form.Item

name={['drawDescribes', index, 'txt']}

initialValue={data.txt}

rules={[{ required: true, message: '请输入内容' }]}

style={{ flex: 1, marginBottom: 0, marginRight: 10 }}

>

<Input maxLength={200} placeholder='请输入内容' />

</Form.Item>

{

itemDatas?.length > 1 &&

<Form.Item>

<FormStepDeleteIcon

onClick={() => removeRow(index)}

/>

</Form.Item>

}

</div>

))}

<FormStepButton

className='text4'

onClick={addRow}

icon={<FormStepAddIcon />}

>

增加一行

</FormStepButton>

</div>

</div>

<div className="fl fl_ai_c fl_jc_fe" style={{ textAlign: 'right', marginTop: 20, cursor: 'pointer' }} onClick={() => setShowNotes(!showNotes)}>

<span style={{ color: 'red', fontSize: 14 }}>*</span><span style={{ marginRight: 8 }}>更多参数</span>{showNotes ? <FormStepUp /> : <FormStepDown />}

</div>

</FormRowDiv>

 

 

或者

 

你可以不用 `<Row>` `<Col>`，直接用**两个并排的表单项**，通过 `style` 设置 `display: inline-block` 或 `flex` 实现一行两个表单。

### 推荐写法：flex布局

````jsx
<div style={{ display: 'flex', gap: 24 }}>
<Form.Item
label="项目名称"
name="projectName"
rules={[{ required: true, message: '请输入项目名称' }]}
labelCol={{ flex: '0 0 110px' }}
wrapperCol={{ flex: 1 }}
style={{ marginBottom: 19, width: 365 }}
>
<Input placeholder="请输入项目名称" maxLength={18} />
</Form.Item>
<Form.Item
label="建设单位"
name="buildClient"
labelCol={{ flex: '0 0 110px' }}
wrapperCol={{ flex: 1 }}
style={{ marginBottom: 19, width: 380 }}
>
<Input placeholder="请输入建设单位" maxLength={18} />
</Form.Item>
</div>
````

- `display: 'flex'` 让两个表单项一行显示
- `gap: 24` 控制间距
- 每个 `Form.Item` 设置固定宽度

这样就能不用 Row/Col 实现一行两个表单项。