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>
2、运用margin负值
<!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;margin-left:-10px;} .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-left:10px;margin-bottom:10px;} </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>