1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>京东区块排版负margin用法</title> 6 <style> 7 *{margin:0;padding:0} 8 .wrap{ 9 margin-top: 10px; 10 overflow: hidden; 11 clear: both; 12 width: 990px; 13 margin: 0 auto; 14 } 15 .ul{ 16 background:#f0f; 17 overflow: hidden; 18 margin-left:-10px; 19 } 20 li{ 21 float: left; 22 padding: 15px 0px 25px 0px; 23 width: 240px; 24 overflow: hidden; 25 background-color: #f45; 26 margin-bottom: 10px; 27 margin-left: 10px; 28 } 29 .demo{width:990px;height:20px;background: black;margin: 0 auto; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="wrap"> 35 <ul class="ul"> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 <li></li> 41 <li></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 <li></li> 48 <li></li> 49 <li></li> 50 <li></li> 51 <li></li> 52 </ul> 53 </div> 54 55 </body> 56 </html>
主要是ul的设置，两点1、不能设置宽度2、负margin等于margin-left的值；
每个li的宽度计算方法等于li.width = （warp.width+margin-left）/li的个数-margin-left;