li列表两端对齐问题

Question

这个图中灰色块两端对齐，我现在用nth-child(3n)设置margin-right:0可以对齐，请问还有别的方法可以对齐吗

<div class="banner"></div>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

*{margin: 0;padding: 0;}
.banner{width:1000px;height: 200px;background: #f00;margin: 0 auto;}
.box{width:1000px;margin: 0 auto;}

ul{overflow: hidden;}
li{
    float: left;
    width:320px;
    height: 200px;
    background: #ccc;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 20px;
}
li:nth-child(3n){
    margin-right: 0;
}

Answer 1

ul{overflow: hidden; margin-right:-20px;}

设置li父级ul的margin-right的负值
li:nth-child(3n)可以去掉了

Answer 2

用flexbox來處理ul{display:flex;justify-content:space-between;flex-wrap:wrap}li{去掉float:left}