如圖為jd的廣告頁面 如果想給每個盒子加上美觀的border，實現如下效果 如果給每個li加border的話盒子就會被撐開，則依照浮動特性一行就容納不下4個li,li會自動掉下來。這時，可以給ul一個寬度，li就不會掉下來，如下圖所示 這時，剛好ul會比外面的盒子高幾像素和幾及像素（如果不清除浮動u ...
如圖為jd的廣告頁面
如果想給每個盒子加上美觀的border，實現如下效果
如果給每個li加border的話盒子就會被撐開，則依照浮動特性一行就容納不下4個li,li會自動掉下來。這時，可以給ul一個寬度，li就不會掉下來，如下圖所示
這時，剛好ul會比外面的盒子高幾像素和幾及像素（如果不清除浮動ul的高度是0），這時再給最外面的盒子overflow-hidden就能達到目的。如圖所示
把最外面盒子的border去掉就能得到想要的效果了。
代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>消除多個邊緣的margin</title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } .box{ height: 300px; width: 400px; margin: 40px auto; overflow:hidden; /*溢出的邊界消除*/ /* border:1px solid #000;*/ } ul{ width: 500px; overflow: hidden;/*觸發bfc就可以在瀏覽器看到ul*/ } li{ width: 100px; height: 100px; float: left; border-bottom:1px solid #ccc; border-right: 1px solid #ccc; } /*使用三層盒子模型做出效果 box給overflow:hideen消除右邊和下麵的總邊距 ul拿來撐開以便一行能容納4個li li拿來給border */ </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
