Element Plus在el-form-item中设置justify-content无效的解决方案

更新时间：2023年10月17日 10:19:26 作者：蘇小筱oig

这篇文章主要介绍了Element Plus在el-form-item中设置justify-content无效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Element Plus在el-form-item中设置justify-content无效

在el-form-item中写了一个包含两个按钮的按钮组，需要居右对齐，使用justify-content：flex-end不起效，经检查问题在于el-form-item下面自动生成的.el-form-item__content样式中包含一句：

.el-form-item__content {
        flex：1

}

所以导致justify-content不生效

解决办法是修改该类的flex属性，但在代码里直接对该类使用类选择器不行，因为这是element内部定义的类，不是我们定义的，所以需要用到深度选择器来检索该类：

/deep/ .el-form-item__content{
        flex: unset

}

或者使用v-deep命令：

::v-deep .el-form-item__content{
         flex: unset

}

两种方式均可修改.el-form-item__content样式，当然直接使用这种方式修改会对所有的.el-form-item__content造成影响，需要scoped或者子类选择来进行约束

结果：

按钮组成功居右对齐！

另外一种居右对齐的办法是使用float，但这并不会解决我们justify-conten失效的问题

justify-content设置在element-plus某些控件中无效

在 el-form-item 设置外部样式justify-content: flex-end 卡住了，死活不起效，记得在element中是可以起效的啊。

查看了element-plus/dist/index.css 的样式表，发现.el-form-item__content 的样式中有这样一句：

.el-form-item__content{

 flex:1

}

如果有这样一句当然 justify-content: flex-end 不会起作用了，于是就覆写了element-plus 默认样式

/deep/ .el-form-item__content{
flex: unset;

}

当然是用到了scoped，全局覆写就惨了。修改后问题解决。

当然您也可以用float解决，那么您可能失去一次学习justify-content的机会，理解和解决问题才是我们学习的关键。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue.js+UEditor集成 [前后端分离项目]
本篇文章主要介绍了详解vue.js+UEditor集成 [前后端分离项目] ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue+springmvc导出excel数据的实现代码
这篇文章主要介绍了vue+springmvc导出excel数据的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
vite+vue3项目集成ESLint与prettier的过程详解
这篇文章主要介绍了vite+vue3项目中集成ESLint与prettier的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
浅谈axios中取消请求及阻止重复请求的方法
在实际项目中，我们可能需要对请求进行“防抖”处理。本文主要实现axios中取消请求及阻止重复请求，具有一定的参考价值，感兴趣的可以了解一下
2021-08-08
使用vue v-for循环图片路径方式
这篇文章主要介绍了使用vue v-for循环图片路径方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
VUE事件处理之@click用法示例代码
在Vue进行前端开发中事件处理是必不可少的功能,下面这篇文章主要给大家介绍了关于VUE事件处理之@click用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
详解Vue中的基本语法和常用指令
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
2019-07-07
vue利用axios来完成数据的交互
这篇文章主要介绍了vue利用axios来完成数据的交互,本文通过实例代码给大家讲解数据交互方法及安装方法,需要的朋友可以参考下
2018-03-03
vue上传图片到oss的方法示例（图片带有删除功能）
这篇文章主要介绍了vue上传图片到oss的方法示例（图片带有删除功能），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue2.5学习笔记之如何在项目中使用和配置Vue
这篇文章主要介绍了Vue2.5学习笔记之如何在项目中使用和配置Vue的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09