1、运用css3的nth-child(3n)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0} .box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;} .box ul{overflow:hidden;} .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-right:10px;margin-bottom:10px;} .box ul li:nth-child(3n){margin-right:0;} </style> </head> <body> <div class="box"> <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> <li>10</li> <li>11</li> <li>12</li> <li>13</li> </ul> </div> </body> </html>
现在流行响应式布局，这种css3解决办法，在响应的时候并不靠谱.可以使用margin负值。
2.使用负margin
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 *{margin:0;padding:0} 8 .box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;} 9 .box ul{overflow:hidden;margin-left:-10px;} 10 .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-left:10px;margin-bottom:10px;} 11 </style> 12 </head> 13 <body> 14 <div class="box"> 15 <ul> 16 <li>1</li> 17 <li>2</li> 18 <li>3</li> 19 <li>4</li> 20 <li>5</li> 21 <li>6</li> 22 <li>7</li> 23 <li>8</li> 24 <li>9</li> 25 <li>10</li> 26 <li>11</li> 27 <li>12</li> 28 <li>13</li> 29 </ul> 30 </div> 31 </body> 32 </html>