el-form-item 两端对齐

### 解决 `el-form-item` 内容两端对齐的方法

为了实现 `el-form-item` 中的内容两端对齐，可以利用 Element UI 提供的布局工具和自定义样式来达到这一效果。

#### 使用 `el-col` 和 `el-row`

通过嵌套 `el-row` 和 `el-col` 组件，能够更精细地控制表单项内的元素排列。对于需要两端对齐的情况，可以在每一行中分别放置两个列，左侧用于显示标签，右侧则用来承载实际控件或文本内容[^5]。

<template>
  <el-form :model="ruleForm">
    <!-- 左右两端对齐 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">Label:</el-col>
      <el-col :span="18">
        <el-input v-model="ruleForm.name"></el-input>
      </el-col>
    </el-row>

    <!-- 或者使用 formItem 包裹上述结构 -->
    <el-form-item label="">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">Another Label:</el-col>
        <el-col :span="18">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
</template>

#### 自定义 CSS 样式调整

如果希望进一步优化视觉呈现，还可以借助于额外的CSS规则来进行微调。比如针对特定场景下的间距、宽度等问题作出响应式的处理[^3]。

<style scoped>
/* 调整内部子项之间的距离 */
/deep/ .el-form-item {
  margin-bottom: 0;
}

/* 设置左右两侧的具体宽度比例 */
.el-col-6 {
  width: 20%;
}
.el-col-18 {
  width: 78%; /* 预留一些空间给潜在的外边距 */
}
</style>

以上方法不仅适用于普通的输入框，同样也适合下拉菜单等其他类型的交互组件。当设置了 `inline=true` 属性后，默认情况下标签会自动变为右对齐模式；此时可以通过显式设定 `label-position='right'` 来保持一致性[^2]。