怎么让el-form-item 的label和input分两行显示,且靠左对齐

可以使用以下样式来实现：

.el-form-item__label {
  display: block;
  float: none;
  clear: both;
  width: auto;
  text-align: left;
}
.el-form-item__content {
  margin-left: 0;
}

这样，label 和 input 就会分两行显示，并且靠左对齐了。需要注意的是，如果是在某个特定表单中使用，最好将样式加上一个类名，以免影响到其他表单。比如：

<el-form>
  <el-form-item class="split-label">
    <template slot="label">姓名</template>
    <el-input></el-input>
  </el-form-item>
  <!-- 其他表单项 -->
</el-form>

.split-label .el-form-item__label {
  display: block;
  float: none;
  clear: both;
  width: auto;
  text-align: left;
}
.split-label .el-form-item__content {
  margin-left: 0;
}

相关问题

el-form-item lable和里边input 输入框两边对齐

可以尝试在 `el-form-item` 中使用 `label-width` 属性来设置标签的宽度，然后在 `el-input` 组件中使用 `style` 属性来设置输入框宽度和对齐方式，例如：

<template>
  <el-form>
    <el-form-item label="用户名" label-width="80px">
      <el-input style="width: calc(100% - 80px); margin-left: 10px;"></el-input>
    </el-form-item>
  </el-form>
</template>

这里设置了标签宽度为 80px，然后在输入框组件中使用 `calc()` 函数来计算宽度，使其占满剩余空间，并在左边留出 10px 的空白，以达到左对齐的效果。你可以根据实际情况调整标签和输入框的宽度和间距。

el-form 设置 label-width 左对齐

要让 `el-form` 中的表单项的 `label` 左对齐，可以通过设置 `label-width` 属性和 `text-align` 样式来实现。具体实现方法如下：

<template>
  <el-form label-width="100px">
    <el-form-item label="姓名" style="text-align: left;">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" style="text-align: left;">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
  </el-form>
</template>

在上面的代码中，我们将 `label-width` 设置为 `100px`，然后在每个 `el-form-item` 中添加 `style` 属性，并设置其 `text-align` 样式为 `left`，即可让 `label` 左对齐。

需要注意的是，在设置 `label-width` 的时候，需要根据实际情况调整宽度，以免 `label` 文字过长导致表单布局错乱。