实现列表两端对齐的两种方法

一，使用 -margin

<div class="container">
            <ul class="list">
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
                <li>我是一个列表</li>
            </ul>
        </div>

*{
    margin: 0;
    padding: 0;
}
.container{
    margin: 0 auto;
    width: 500px;
    border: 1px solid red;
    margin-bottom: 20px;
}
.list{
    overflow: hidden;  <!--防止高度塌陷-->
    margin-right: -10px;
}
.list li{
    list-style: none;
    width: 92px;
    height: 92px;
    background-color: #0000FF;
    margin-bottom: 20px;
    float: left;
    margin-right:10px ;
}

二.text-align: justify

<div class="container">
            <ul class="list">
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="visible-li">我是一个列表</li>
                <li class="hidden-li">我是一个列表</li>
                <li class="hidden-li">我是一个列表</li>   <!--解决最后一行不能对齐的bug-->          

            </ul>
        </div>

*{
    margin: 0;
    padding: 0;
}
.container{
    margin: 0 auto;
    width: 500px;
    border: 1px solid red;
    margin-bottom: 20px;
}
.list{
    text-align: justify;
}
.list li{
    display: inline-block;
    list-style: none;
}
.list .visible-li{
    width: 92px;
    height: 92px;
    background-color: #0000FF;
    margin-bottom: 20px;
}
.list .hidden-li{
    height: 0;
    opacity: 0;
    visibility: hidden;
    height: 0;
}