Element-Ui的Form表单：Label文本两端对齐，且必填项的*不影响布局

1. HTML 结构

首先，确保你的 HTML 或 Vue 模板中有一个 el-form 组件，类似下面这样：

<div id="app">
  <el-form :model="form" label-width="100px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</div>

2. CSS 样式调整

你可以通过以下 CSS 来实现标签文本的两端对齐。这里使用了 text-align: justify 和伪元素技巧来达到两端对齐的效果。然后将通过对星号使用绝对定位的方式进行调整，使其不影响标签文本的对齐。此外，标签将使用 padding-left 来为星号预留空间：

.el-form-item__label {
  position: relative; /* 设置相对定位作为星号的定位基准 */
  text-align: justify;
  text-align-last: justify; /* 确保最后一行也两端对齐 */
  padding-left: 10px; /* 为星号预留空间 */
}

.el-form-item__label:before {
  content: '*';
  color: red;
  position: absolute;
  left: 0; /* 星号定位到标签最左侧 */
  top: 0; /* 调整垂直位置以适应行高 */
}