2022年开年第一篇,很庆幸一直能学到新的东西,生命不息奋斗不止!
回顾这一年,从刚开始的学习定义变量到现在可以独立完成一个模块的功能,技术上确实长进不少,也深深地感受到你知道的越多,你不知道的越多
;
希望在新的一年里技术更上一个台阶,工资越来越多,嘻嘻(#.#)
话不多说,开干吧~
一. 问题
我们发现,需要设置一定边距时,如果子容器设置宽度为100%,然后设置了margin,会超出父容器的宽度溢出。
.renderList {
width: 100%;
background: #fff;
.renderItem {
width: 100%;
display: flex;
justify-content: space-between;
margin: 29upx;
border-bottom: 1upx solid #e0e0e0;
}
}
二. 解决
想要实现的效果其实是这样的
思路:
1)先给父容器设置 左右padding: 0 29upx; 每个item的下划线就会离左右两边有一段距离,是我想要的效果
2)再给子容器item设置 上下padding: 29upx 0; 盒子上下有个距离更美观
.renderList {
width: 100%;
height: auto;
background: #fff;
padding: 0 29upx;
box-sizing: border-box;
.renderItem {
width: 100%;
display: flex;
justify-content: space-between;
padding: 29upx 0;
border-bottom: 1upx solid #e0e0e0;
}
}
这个问题经常会遇到,这次在这做个总结吧;这是我个人的一种解决方案,还会有其他更好的方案,欢迎补充指正,一起探讨学习~