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;

总结

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

相关文章

  • springboot+vue实现文件上传下载

    springboot+vue实现文件上传下载

    这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    这篇文章主要介绍了Vue axios全局拦截 get请求、post请求、配置请求的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 在Vue中使用WebScoket 会怎么样?

    在Vue中使用WebScoket 会怎么样?

    这篇文章主要介绍了在Vue中使用WebScoket,网络的不稳定而断开连接,webscoket不会出现异常,下面就一起进入文章看看吧
    2022-01-01
  • Vue3 Ref获取真实DOM学习实战

    Vue3 Ref获取真实DOM学习实战

    这篇文章主要为大家介绍了Vue3 Ref获取真实DOM学习实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 优选七个用于vue开发的JS库

    优选七个用于vue开发的JS库

    这篇文章主要介绍了JavaScript优选七个用于vue开发库,借助开源库加速Vue项目的开发进度是现代前端开发比较常见的方式,平常收集一些JavaScript库介绍,在遇到需要的时候可以信手拈来
    2023-02-02
  • Vue3中按需引入ECharts详细步骤(一看就会)

    Vue3中按需引入ECharts详细步骤(一看就会)

    新项目采用Vue3作为前端项目框架,避免不了要使用echarts,这篇文章主要给大家介绍了关于Vue3中按需引入ECharts的相关资料,需要的朋友可以参考下
    2023-09-09
  • Vue中使用flv.js播放视频的示例详解

    Vue中使用flv.js播放视频的示例详解

    这篇文章主要为大家详细介绍了如何在Vue项目中使用flv.js播放视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • Vue开发中常见的套路和技巧总结

    Vue开发中常见的套路和技巧总结

    这篇文章主要给大家介绍了关于Vue开发中常见的套路和技巧的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue动态改变背景图片demo分享

    vue动态改变背景图片demo分享

    今天小编就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue2模拟vue-element-admin手写角色权限的实现

    vue2模拟vue-element-admin手写角色权限的实现

    本文主要介绍了vue2模拟vue-element-admin手写角色权限的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论