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

在做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;
        }