IT技术

margin负值 - 两端对齐(margin可以改变元素尺寸的特性)
作者:
来源: 本站
发布日期: 2018/5/16 16:48:03
点击量: 1409次
【 字体:
背景颜色:

如上图,这样的两端对齐是非常常见的排版方式,一般来讲,绿色的一般是一模一样的,比如是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