margin负值 - 两端对齐(margin可以改变元素尺寸的特性)
时间:2018/5/16 16:48:03    浏览次数:218 来源:本站作者:管理员

如上图,这样的两端对齐是非常常见的排版方式,一般来讲,绿色的一般是一模一样的,比如是ul li,li的尺寸相同,整齐排列,这时候就可以使用margin负值进行两端对齐

上图实现代码:

Markup
<!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就可以很好的排列了!

Contact联系我们
告诉我们您想要的吧!我们为当地客户提供专业、及时的服务。

地址:云南省昆明市白云路368号

电话:400-871-8716     (工作时间:09:00-18:00(周一至周五))

何总:23592693

李总:53815112