php中两个盒子并排,盒子并排等分，左右盒子贴边，中间盒子均匀间隔分布

在做react项目中，习惯了用

24等分，这时需要个需求，一行五个盒子，并排，盒子数量不确定， 的span属性不支持小数，这是就只能自己写了，此时有两种方法flex 布局和 百分比布局，

flex布局并没有找到合适做法，只能自己写个并排布局

不能不能直接用li来margin，因为宽度固定了，左右margin整个宽度会超过100%

• 1
• 2
• 3
• 4
• 5
• 6
• 7

需要把左右靠边的盒子左和右margin去掉

ul {

overflow: hidden;

}

li {

margin-bottom: 10px; //上下偏移在li中用margin

list-style: none;

float: left;

width: 20%;

height: 50px;

}

.box{

margin:0 10px; //左右偏移在div中

height: 100%;

border:2px solid #000;

}

li:nth-child(5n+1) .box{ //最左侧盒子去掉左边margin

margin-left:0;

background: skyblue;

}

li:nth-child(5n) .box{ //最右侧盒子去掉左边margin

margin-right: 0;

}