vue el-row中ul间距问题

2024-08-07 08:48:15 作者：笨爪

这篇文章主要介绍了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=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;

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