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

在做react项目中，习惯了用<col> 24等分，这时需要个需求，一行五个盒子，并排，盒子数量不确定，
<Col> 的span属性不支持小数，这是就只能自己写了，此时有两种方法flex 布局和 百分比布局，
flex布局并没有找到合适做法，只能自己写个并排布局

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

  <ul>
       <li>
           <div class="box">1</div>
       </li>
       <li>
           <div class="box">2</div>
       </li>
       <li>
           <div class="box">3</div>
       </li>
       <li>
           <div class="box">4</div>
       </li>
       <li>
           <div class="box">5</div>
       </li>
       <li>
           <div class="box">6</div>
       </li>
       <li>
           <div class="box">7</div>
       </li>
      
    </ul>

需要把左右靠边的盒子左和右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;
        }