vue el-row中ul间距问题

 更新时间:2024年08月07日 08:48:14   作者:笨爪  
这篇文章主要介绍了vue el-row中ul间距问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue el-row中ul间距

在 el-row 中使用 ul 标签,可以通过为 ul 添加类似 margin: 0 20px; 的样式来调整间距。

例如:

.my-ul {
  margin: 0 20px;
}

然后在模板中使用这个类:

<el-row>
  <ul class="my-ul">
    <!-- 列表项 -->
  </ul>
</el-row>

这样就可以在 el-row 中调整 ul 标签的间距了。

el-row的gutter注意事项

<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会使el-row的容器宽度增加20px,因为存在margin-left:-10px、margin-right:-10px,在全屏宽度时候可能会导致出现横向滚动条。

可在el-row父元素设置overflow:hidden;

总结

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

相关文章

  • vue如何给自定义的组件绑定点击事件

    vue如何给自定义的组件绑定点击事件

    这篇文章主要介绍了vue如何给自定义的组件绑定点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 通过vue刷新左侧菜单栏操作

    通过vue刷新左侧菜单栏操作

    这篇文章主要介绍了通过vue刷新左侧菜单栏操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue点击按钮跳转到另一个vue页面实现方法

    vue点击按钮跳转到另一个vue页面实现方法

    这篇文章主要给大家介绍了关于vue点击按钮跳转到另一个vue页面的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 如何在Vue和Spring boot之间实现前后端连接

    如何在Vue和Spring boot之间实现前后端连接

    最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue中$event使用之获取当前元素及相关元素

    vue中$event使用之获取当前元素及相关元素

    这篇文章主要介绍了vue中$event使用之获取当前元素及相关元素,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue结合leaflet实现热力图

    vue结合leaflet实现热力图

    本文主要介绍了vue实现热力图,结合leaflet.heat插件可以很容易的做出热力图,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 详解VS Code使用之Vue工程配置format代码格式化

    详解VS Code使用之Vue工程配置format代码格式化

    这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue项目使用Websocket大文件FileReader()切片上传实例

    Vue项目使用Websocket大文件FileReader()切片上传实例

    这篇文章主要介绍了Vue项目使用Websocket大文件FileReader()切片上传实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue中使用Lodop插件实现打印功能的简单方法

    Vue中使用Lodop插件实现打印功能的简单方法

    这篇文章主要给大家介绍了关于Vue中使用Lodop插件实现打印功能的简单方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • Vue3中vue-router的使用方法详解

    Vue3中vue-router的使用方法详解

    Vue Router 是 Vue 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,本文将通过简单的示例为大家介绍一下vue-router的使用,需要的可以参考一下
    2023-06-06

最新评论