如上圖,這樣的兩端對齊是非常常見的排版方式,一般來講,綠色的一般是一模一樣的,比如是ul li,li的尺寸相同,整齊排列,這時候就可以使用margin負值進行兩端對齊!
上圖實現(xiàn)代碼:
<!doctype html><html><head><meta charset="utf-8"><title>margin負值 - 兩端對齊(margin可以改變元素尺寸的特性)</title></head><style> *{margin: 0;padding: 0;} body{margin: 100px;} /*css開始*/ .box{width: 680px; background-color: #999;overflow: hidden} .box ul{list-style: none;margin-right: -20px;} .box li{float: left; width:155px;height: 120px; margin-right: 20px;margin-bottom: 20px; background-color: green;}</style><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>
重點就是CSS中: .box ul{list-style: none;margin-right: -20px;}中,加入了margin-right:20px;此時對ul整體更改了尺寸,負值20px,是為ul增大尺寸20px,此時li就可以很好的排列了!