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

最新推荐文章于 2024-06-24 17:58:39 发布

晨旭缘

最新推荐文章于 2024-06-24 17:58:39 发布

阅读量1.7k

点赞数 2

分类专栏：前端 Css 文章标签： ui

本文链接：https://blog.csdn.net/weixin_45680024/article/details/137794061

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Css

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML结构中使用ElementUI的el-form组件，并展示了如何通过CSS调整表单项标签的两端对齐效果，包括使用text-align属性和伪元素实现星号的定位。

摘要由CSDN通过智能技术生成

实现效果

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