Question

所以问题是图片不适合某个宽度，尽管它们应该。我有画廊页面，连续12张照片和4张照片。图片为200x200px，它们之间的空间应为60px。主要部分是980px宽。简单的计算是：200px + 60px（空格）+ 200px + 60px + 200px + 60px + 200px = 980px。但它仍然将第四张图片推向了新的一行。

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但我真的不能超过980px。

任何人都知道导致这种情况的原因是什么？

我在项目开始时重置了CSS，因此不会出现浏览器故障。

Answer 1

问题是ul中的填充，您需要在所有float:left和li s中添加a - {{1}的正确填充s是li：

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

<强> CSS：

45px

<强> HTML：

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

宽度和边距不会加起来

1 个答案: