css负边距布局

三行三列的布局

 代码结构

<div class="container"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul> </div>　

样式 

1 body,ul,li{ padding:0; margin:0;} 2 ul,li{ list-style:none;} 3 .container{ 4 width: 340px; 5 border: 1px solid red; 6 } 7 ul { 8 margin-right: -20px; 9 margin-bottom: -20px; 10 overflow: hidden; 11 } 12 ul li { 13 width: 100px; 14 height: 100px; 15 margin-right: 20px; 16 margin-bottom: 20px; 17 background: blue; 18 float: left; 19 }

 

不使用float，可以换成display:inline-block，⚠️：该种情况需要设置font-size属性来去掉间隔

转载于:https://www.cnblogs.com/lhyhappy365/p/11547147.html

总结

以上是生活随笔为你收集整理的css负边距布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。