三行三列的布局

?代碼結構

<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负边距布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。