去除兩端margin的方法


假如有一份視覺稿,其中一部分是實現這樣的:

兩排橫向排列的框,它們中間有邊距,兩端無邊距。每個框大小為100*100,外邊距為20,整個區域為460*220。

HTML結構:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

根據以上結構大致想到:li左浮動是必須的,可以給每個li加20px的左邊距或右邊距,然后再加20px的上邊距或下邊距。

初步設置后是這樣的

有以下三個方法解決多出的外邊距問題。

方法一:

<div>
    <ul>
        <li class="first"></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="first"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
div {
    overflow: hidden;
    width: 460px;
    height: 220px;
}
ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #0099cc;
}
li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
    background-color: #FFF799;
}
li.first {
    margin-left: 0;
}

在上下邊距中我選擇了添加下邊距,在最外層div限定高度並overflow:hidden,於是多出的下邊距被隱藏;左右邊距的處理辦法是在每一行的第一個li添加一個class=first,單獨處理這個first。

這是一種很普遍的做法,在很多網站的結構中都能看得到。

這樣做的缺點:要單獨設置每一行的第一個元素或者最后一個元素,若是有很多行則要處理很多行,並且多添加了一個class。

方法二:

HTML上面不用做任何改動,也不用添加class,最外層div設定高度和寬度,ul添加20px的左負邊距

div {
    overflow: hidden;
    width: 460px;
    height: 220px;
}
ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #0099cc;
    margin-left: -20px;
}
li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
    background-color: #FFF799;
}

個人比較喜歡用負邊距來彌補邊邊角角的問題,比如解決“邊框合並”、“兩端邊距/邊框”、“tab選項卡”。

方法三:

ul加寬(添加的寬度大於等於li的外邊距,小於li的寬度即可,這樣可以讓ul的寬度多容納一個外邊距,又不會讓下一行的li擠上來),最外層div設置overflow:hidden,li設置右邊距

div {
    overflow: hidden;
    width: 460px;
    height: 220px;
}
ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #0099cc;
    width: 480px;
}
li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #FFF799;
}

 

 

歡迎批評指正。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM