Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
Element Plus在el-form-item中設(shè)置justify-content無效
在el-form-item中寫了一個包含兩個按鈕的按鈕組，需要居右對齊，使用justify-content：flex-end不起效，經(jīng)檢查問題在于el-form-item下面自動生成的.el-form-item__content樣式中包含一句：
.el-form-item__content {
flex：1
}所以導(dǎo)致justify-content不生效
解決辦法是修改該類的flex屬性，但在代碼里直接對該類使用類選擇器不行，因為這是element內(nèi)部定義的類，不是我們定義的，所以需要用到深度選擇器來檢索該類：
/deep/ .el-form-item__content{
flex: unset
}或者使用v-deep命令：
::v-deep .el-form-item__content{
flex: unset
}兩種方式均可修改.el-form-item__content樣式，當(dāng)然直接使用這種方式修改會對所有的.el-form-item__content造成影響，需要scoped或者子類選擇來進(jìn)行約束
結(jié)果：
按鈕組成功居右對齊！
另外一種居右對齊的辦法是使用float，但這并不會解決我們justify-conten失效的問題
justify-content設(shè)置在element-plus某些控件中無效
在 el-form-item 設(shè)置外部樣式j(luò)ustify-content: flex-end 卡住了，死活不起效，記得在element中是可以起效的啊。
查看了element-plus/dist/index.css 的樣式表，發(fā)現(xiàn).el-form-item__content 的樣式中有這樣一句：
.el-form-item__content{
flex:1
}如果有這樣一句當(dāng)然 justify-content: flex-end 不會起作用了，于是就覆寫了element-plus 默認(rèn)樣式
/deep/ .el-form-item__content{
flex: unset;
}當(dāng)然是用到了scoped，全局覆寫就慘了。修改后問題解決。
當(dāng)然您也可以用float解決，那么您可能失去一次學(xué)習(xí)justify-content的機(jī)會，理解和解決問題才是我們學(xué)習(xí)的關(guān)鍵。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家整理的是關(guān)于vue-socket.io跨域問題有效解決方法，對此有興趣的朋友們可以參考下。2020-02-02
前端Vue3最常用的?20?道面試題總結(jié)(含詳細(xì)解釋和代碼示例)
Vue3作為當(dāng)前前端主流框架,其核心特性、底層原理及生態(tài)工具是面試中的高頻考點,這篇文章主要介紹了前端Vue3最常用的20道面試題(含詳細(xì)解釋和代碼示例)的相關(guān)資料,需要的朋友可以參考下2026-05-05
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue中使用render封裝一個select組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
關(guān)于vue路由緩存清除在main.js中的設(shè)置
今天小編就為大家分享一篇關(guān)于vue路由緩存清除在main.js中的設(shè)置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vuejs實現(xiàn)ready函數(shù)加載完之后執(zhí)行某個函數(shù)的方法
這篇文章主要介紹了vuejs實現(xiàn)ready函數(shù)加載完之后執(zhí)行某個函數(shù)的方法,需要的朋友可以參考下2018-08-08
vue中動態(tài)修改img標(biāo)簽中src的方法實踐
本文主要介紹了vue中動態(tài)修改img標(biāo)簽中src的方法實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
文章介紹了在使用keep-alive緩存組件時,如何在組件被緩存后清理定時器以避免干擾其他組件的邏輯,通過在deactivated鉤子中清理定時器,可以確保組件被緩存時不會繼續(xù)運(yùn)行定時器,感興趣的朋友一起看看吧2025-02-02