element ui表单el-form的label自适应宽度并左对齐

小咪咪 2023-10-01 20:19 4阅读 0赞

> **el-form**标签中**label-width**设置为\*\*auto，**label就会**自适应标签的长度，\*\*但会默认右对齐(此时使用label-position="left"也无法改变对其方式)

代码如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy_size_15_color_FFFFFF_t_70_g_se_x_16][]

效果图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy_size_16_color_FFFFFF_t_70_g_se_x_16][]

此时，label以右对齐的方式进行自适应，经过调查发现，element中是通过

> .el-form-item\_\_label-wrap\{ float: left; \}

将label向左票之后，通过填补margin-left实现右对齐，所以想让label自适应之后**左对齐**，只需要将**margin-left**设置为**0px**即可。

css代码如下：

.el-form-item__label-wrap {
      margin-left: 0px !important;
    }

左对齐后的效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy_size_17_color_FFFFFF_t_70_g_se_x_16][]

另外：如果**label-width**是设定了**固定值**，那么可以通过**labe-position**直接设置label**标签的对齐方式**(可参考elementUI官方文档说明)。

## 总结 ##

**写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。**

**由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 [点击我的GitHub免费获取][GitHub]。  
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！**

**全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。**

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ececf4c76f9f432f9d7047583dfe436f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/57c2c47ba0d845b790f1d7546f1aff6a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c11b0ea7c49a4f8c80adba2a03cfeda2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiA5Z2X6Ieq55Sx55qE6aW85bmy,size_17,color_FFFFFF,t_70,g_se,x_16
[GitHub]: https://gitee.com/vip1024p/web-p7/blob/master/README.md