為什麼會對齊一般我們給li標籤設定margin-left最後一個總是會有一個不需要的left那為什麼如何去除呢？

答案是：margin：負值

如果ul右邊多了20px，那麼給ul設定個margin-right:-20px這樣寫ul的寬頻部會變但是當給他加的DIV並設定為inline-block，加個border的時候就會發現那個20px的距離被忽視了，

這裡說一句就是margin改變內部尺寸要在當他是流動性，且美設定寬度，

這裡多說一點當div設定成了inline-block的時候用margin:0 auto是沒用的 要用 text-align：center

css：

                 .div1{
                width: 80%;
                height: 500px;
                margin: 0 auto;
                border: 1px solid saddlebrown;
                text-align: center;
            }
            .div2{
                font-size: 0px;
                display: inline-block;
                border: 1px solid saddlebrown;
                
            
            }
            ul{
                list-style: none;
                
                overflow: hidden;
                display: inline-block;
                margin-right: -20px;
                
            }
            
            ul li{
                float: left;
                width: 100px;
                height: 100px;
                background-color: #8B4513;
                margin-right: 20px;
            }

Html:

    <div class="div1">    
        <div class="div2">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>