在 <el-form-item> 标签中，el-input 中的 label 标签和 input 输入框有时不能在同一行显示：

<el-form ref="form" :model="formData">
  <el-form-item label="活动名称">
    <el-input v-model="formData.name" />
  </el-form-item>
</el-form>

以上的代码显示的效果如下：

我们期望的效果是 label 和输入框的距离是在同一行显示。我们只需要在 el-form, el-form-item 上添加 label-width 属性即可。

在 el-form 上添加 label-width 属性

<el-form ref="form" :model="formData" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="formData.name" />
  </el-form-item>
</el-form>

在 el-form-item 上添加 label-width 属性

<el-form ref="form" :model="formData">
  <el-form-item label="活动名称" label-width="80px">
    <el-input v-model="formData.name" />
  </el-form-item>
</el-form>

通过在 el-form-item 和 el-form 上添加 label-width 属性，解决了 label 标签和input输入框不能一行显示的问题。