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