Ширина и разметка не складываются

Question

Так что проблема заключается в том, что картинки не соответствуют определенной ширине, хотя они должны. У меня есть страница галереи с 12 фотографиями и 4 фотографиями подряд. Фотографии размером 200x200 пикселей, а между ними должно быть 60 пикселей. Основное разделение - 980 пикселей. Простым вычислением будет то, что: 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; 
    } 

Так что я изменил 4-й, 8-го и 12-го изображения маржинального-право на 0, чтобы они могли поместиться в ширину контейнера, но это не поможет. Первая ширина, когда 4 изображения в строке 992px, но я действительно не могу переместиться на 980 пикселей.

У кого-нибудь есть идея, что вызывает эту ситуацию?

Я сбросил CSS в начале проекта, поэтому не должно быть никаких сбоев в работе браузера.

Answer 1

проблемой является заполнение в ul, и вам нужно добавить float:left в всех li с и a s-правильное заполнение для li с является 45px:

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

УС:

.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>