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; /* 调整垂直位置以适应行高 */
}