margin负值 - 两端对齐（margin可以改变元素尺寸的特性）_CSS学习

资料来源：网络整理时间：2023/3/4 0:57:19 共计：3647 浏览

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

上图实现代码：

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：html - 指定 tab 键顺序 tabindex 属性_html标签 | ·下一条：常用的HTML特殊符号_html标签