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