在html+css布局里ul>li挺常用的，在群里（WEB前端開發 458732443）總有新手問怎么解決li的最后一個margin值的問題。
下面介紹一下，大神請不要拍磚。
先看兩個demo，你可以先運行，改變box的寬度看一下。
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;}
.box ul li:last-child {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-right:-10px;} // 這里是重點,設置-10,把最后一個的margin-right吃掉
.box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-bottom:10px;margin-right: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>
首先，看看設計的樣子，並計算.box的寬度
由於自身帶了margin-right被擠下去了
用css3的nth-child(3n)解決辦法
現在流行響應式布局，這種css3解決辦法，在響應的時候並不靠譜
下面用margin負值解決辦法
同理可以用margin-right負值。自己研究
對於新手，如果不需要考慮古代瀏覽器和響應式就用css3。反之用margin負值。
http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html