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.js仿hover效果的实现方法示例

    vue.js仿hover效果的实现方法示例

    这篇文章主要介绍了vue.js仿hover效果的实现方法,结合实例形式分析了vue.js事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 利用VUE框架,实现列表分页功能示例代码

    利用VUE框架,实现列表分页功能示例代码

    本篇文章主要介绍了利用VUE框架,实现列表分页功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • 详解Vue2.0 事件派发与接收

    详解Vue2.0 事件派发与接收

    这篇文章主要介绍了详解Vue2.0 事件派发与接收,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解element ui 添加自定义方法

    详解element ui 添加自定义方法

    今天在修改 el-table 源码过程中遇到一个头大的问题,原本修改编译后,将 element的子目录lib下的文件复制到项目的响应目录里就可以了,但是这次总出问题,下面小编给大家分享element ui 添加自定义方法,感兴趣的朋友一起看看吧
    2024-02-02
  • vue动态添加表单validateField验证功能实现

    vue动态添加表单validateField验证功能实现

    这篇文章主要介绍了vue动态添加表单validateField验证功能实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue关于data变量定义的问题

    vue关于data变量定义的问题

    这篇文章主要介绍了vue关于data变量定义的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3 中v-model语法糖示例详解

    vue3 中v-model语法糖示例详解

    vue3中的v-model相当于vue2中的v-model和v-bind.sync 修饰符组合在一起的产物(择优整合)v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 v-model 绑定属性,使用参数区分,这篇文章主要介绍了vue3 中v-model语法糖,需要的朋友可以参考下
    2024-06-06
  • vue前台显示500和405错误的解决(springboot为后台)

    vue前台显示500和405错误的解决(springboot为后台)

    这篇文章主要介绍了vue前台显示500和405错误的解决(springboot为后台),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue生命周期中的组件化你知道吗

    Vue生命周期中的组件化你知道吗

    这篇文章主要为大家详细介绍了Vue生命周期中的组件化,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 关于el-col的使用,占据宽度的应用解析

    关于el-col的使用,占据宽度的应用解析

    这篇文章主要介绍了关于el-col的使用,占据宽度的应用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论