假如有一份視覺稿,其中一部分是實現這樣的:
兩排橫向排列的框,它們中間有邊距,兩端無邊距。每個框大小為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; }
歡迎批評指正。