如上图,这样的两端对齐是非常常见的排版方式,一般来讲,绿色的一般是一模一样的,比如是ul li,li的尺寸相同,整齐排列,这时候就可以使用margin负值进行两端对齐!
上图实现代码:
<!doctypehtml><html><head><metacharset="utf-8"><title>margin负值-两端对齐(margin可以改变元素尺寸的特性)</title></head><style> *{margin:0;padding:0;} body{margin:100px;} /*css开始*/ .box{width:680px;background-color:#999;overflow:hidden} .boxul{list-style:none;margin-right:-20px;} .boxli{float:left;width:155px;height:120px;margin-right:20px;margin-bottom:20px;background-color:green;}</style><body><divclass="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中:.boxul{list-style:none;margin-right:-20px;}中,加入了margin-right:20px;此时对ul整体更改了尺寸,负值20px,是为ul增大尺寸20px,此时li就可以很好的排列了!