幅とマージンは加算されません

Question

問題は写真が特定の幅に収まらないことです。ギャラリーページに12枚の写真と4枚の写真が並んでいます。写真は200x200pxで、その間のスペースは60pxです。メイン部の幅は980pxです。単純な計算は、200px + 60px（スペース）+ 200px + 60px + 200px + 60px + 200px = 980pxです。しかし、それはまだ4番目の写真を新しい行にプッシュします。

HTML：

  <ul> 
      <li> 
       <a href="photos/01.jpg"> 
       <img src="photos/thumbnails/01.jpg" alt="First"> 
       <p></p> 
       </a> 
      </li> 
      <li> 
       <a href="photos/02.jpg"> 
       <img src="photos/thumbnails/02.jpg" alt="First"> 
       <p></p> 
       </a> 
      </li> 
      <li> 
       <a href="photos/03.jpg"> 
       <img src="photos/thumbnails/03.jpg" alt="First"> 
       <p></p> 
       </a> 
      </li> 
      <li> 
       <a href="photos/04.jpg"> 
       <img src="photos/thumbnails/04.jpg" alt="First"> 
       <p></p> 
       </a> 
      </li> 
     ..... 

     </ul> 

CSS：

.container { 
    width: 980px; 
    margin: 0 auto; 
    } 

li { 
    display: inline-block; 
    margin-right: 60px; 
    margin-bottom: 60px; 
    } 

ul li:nth-child(4) { 
    margin-right: 0px; 
    } 

li:nth-child(8) { 
    margin-right: 0px; 
    } 

li:nth-child(12) { 
    margin-right: 0px; 
    } 

だから私は、そう、彼らはコンテナの幅に収まることができ、0〜8日と12日絵マージン右の4を変更しましたが、それ文句を言わないの助け。最初の幅は、行に4枚の写真がある場合は992pxですが、実際には980pxを超えることはできません。

誰もがそのような状況の原因を考えていますか？

私はプロジェクトの開始時にCSSをリセットしたので、ブラウザの誤動作は起こらないはずです。

Answer 1

問題がulでパディングされ、そしてあなたはすべてのli秒でfloat:leftを追加必要とa S-li秒の正しいパディングは45px次のとおりです。

200 + 45 + 200 + 45 + 200 + 45 + 200 + 45 = 980

CSS：

.container { 
    width: 980px; 
    margin: 0 auto; 
} 

a { 
    float: left; 
} 

ul { 
    padding: 0; 
} 

ul li { 
    display: inline-block; 
    float: left; 
    margin-right: 45px; 
    margin-bottom: 60px; 
} 

ul li img { 
    width: 200px; 
    height: 200px; 
} 

HTML：私は正直でなければならない場合

<div class="container"> 
    <ul> 
    <li> 
     <a href="photos/01.jpg"> 
     <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First"> 
     <p></p> 
     </a> 
    </li> 
    <li> 
     <a href="photos/02.jpg"> 
     <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First"> 
     <p></p> 
     </a> 
    </li> 
    <li> 
     <a href="photos/03.jpg"> 
     <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First"> 
     <p></p> 
     </a> 
    </li> 
    <li> 
     <a href="photos/04.jpg"> 
     <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First"> 
     <p></p> 
     </a> 
    </li> 
    </ul> 
</div>