vue el-row中ul間距問題
更新時(shí)間：2024年08月07日 08:48:14 作者：笨爪
這篇文章主要介紹了vue el-row中ul間距問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue el-row中ul間距
在 el-row 中使用 ul 標(biāo)簽，可以通過為 ul 添加類似 margin: 0 20px; 的樣式來調(diào)整間距。
例如：
.my-ul {
margin: 0 20px;
}然后在模板中使用這個(gè)類：
<el-row>
<ul class="my-ul">
<!-- 列表項(xiàng) -->
</ul>
</el-row>這樣就可以在 el-row 中調(diào)整 ul 標(biāo)簽的間距了。
el-row的gutter注意事項(xiàng)
<el-row :gutter=20> <el-col :span=8></el-col> <el-col :span=8></el-col> <el-col :span=8></el-col> </el-row>
注意：
gutter會(huì)使el-row的容器寬度增加20px，因?yàn)榇嬖趍argin-left:-10px、margin-right:-10px，在全屏寬度時(shí)候可能會(huì)導(dǎo)致出現(xiàn)橫向滾動(dòng)條。
可在el-row父元素設(shè)置overflow:hidden;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何給自定義的組件綁定點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了通過vue刷新左側(cè)菜單欄操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue中$event使用之獲取當(dāng)前元素及相關(guān)元素
這篇文章主要介紹了vue中$event使用之獲取當(dāng)前元素及相關(guān)元素,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue結(jié)合leaflet實(shí)現(xiàn)熱力圖
本文主要介紹了vue實(shí)現(xiàn)熱力圖，結(jié)合leaflet.heat插件可以很容易的做出熱力圖，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例
這篇文章主要介紹了Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下2023-06-06