html - 宽度和边距不相加

Question

所以问题是图片不适合特定的宽度，尽管它们应该。我有一个包含 12 张照片和连续 4 张照片的画廊页面。图片为 200x200px，它们之间的间距应为 60px。 Main Div 是 980px 宽。简单的计算是:200px + 60px(space) + 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 张图片的 margin-right 更改为 0，以便它们适合容器宽度，但这无济于事。第一个宽度，当一行有 4 张图片时是 992px，但我真的不能超过 980px。

有人知道是什么原因导致这种情况吗？

我在元素开始时重置了 CSS，因此应该不会出现浏览器故障。

Answer 1

问题是 ul 中的填充，你需要在所有 li 和 a 中添加 float:left s—lis 的正确填充是 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>