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-socket.io跨域问题有效解决方法，对此有兴趣的朋友们可以参考下。2020-02-02
前端Vue3最常用的 20 道面试题总结(含详细解释和代码示例)
Vue3作为当前前端主流框架,其核心特性、底层原理及生态工具是面试中的高频考点,这篇文章主要介绍了前端Vue3最常用的20道面试题(含详细解释和代码示例)的相关资料,需要的朋友可以参考下2026-05-05
本文主要介绍了vue3中处理不同数据结构JSON的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了vue3的watch用法以及和vue2中watch的区别，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,需要的朋友可以参考下2018-08-08
本文主要介绍了vue中动态修改img标签中src的方法实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
文章介绍了在使用keep-alive缓存组件时,如何在组件被缓存后清理定时器以避免干扰其他组件的逻辑,通过在deactivated钩子中清理定时器,可以确保组件被缓存时不会继续运行定时器,感兴趣的朋友一起看看吧2025-02-02
最新评论