箱子并排等分，左右箱子对齐，中间箱子等间距

时间：2023-03-30 13:25:21 CSS

在react项目中，我习惯用分成24等份。这时候需要一个需求，五个盒子一排，并排，盒子个数不定，而且的span属性不支持小数，只能自己写了。这时候有两种方式：flex布局和百分比布局。还没有找到合适的flex布局方式。我只能自己写一个并排布局。我不能直接用li来做margin，因为宽度是固定的，整个左右margin的宽度会超过100%

需要把左右框的左右边距去掉ul{overflow:hidden;}li{margin-bottom:10px;//使用边距list-style:none;在li中上下偏移向左飘浮;宽度：20%；高度：50px；}.box{边距：010px；//div高度的左右偏移量：100%；边框：2px实心#000；}li:nth-child(5n+1).box{//最左边的框去掉左边距margin-left:0;背景：天蓝色；}li:nth-child(5n).box{//最右边的框去掉左边距margin-right:0;}

上一篇：如何判断士兰机器人底盘路径规划是否成功？

下一篇：强大的CSS动画：Transition和Animation

箱子并排等分，左右箱子对齐，中间箱子等间距相关文章