html - 缩略图显示不正确

Question

我是 Neat 的新手。我正在尝试创建一个缩略图网格画廊。现在我在 li 中设置了没有边距和填充的网格，但不知何故第一行和第二行之间存在间隙。它是 li 和底部图像之间的差距。 我将李标记为红色以显示差距。 你能告诉我我在 CSS 上哪里做错了吗？ 谢谢。

这是CSS

img {
    max-width: 100%;
    height: auto;
}
body {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
.mainContainer {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mainContainer:after {
    content:"";
    display: table;
    clear: both;
}
.mainContainer .thumblist ul {
    margin: 0;
    padding: 0;
}
.mainContainer .thumblist ul li.block {
    float: left;
    display: block;
    margin-right: 0%;
    width: 25%;
    background-color: red;
}
.mainContainer .thumblist ul li.block:last-child {
    margin-right: 0;
}
.mainContainer .thumblist ul li.block:nth-child(4n) {
    margin-right: 0;
}
.mainContainer .thumblist ul li.block:nth-child(4n+1) {
    clear: left;
}

这是Html

<div class="mainContainer">
<div class="thumblist">
    <ul>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>    
    </ul>
</div>
</div>

我还上传了一个演示，你可以在这里看看。 谢谢。 Demo

Answer 1

您需要为 <li> 指定高度

.mainController .thumbnail ul li.block {
    height:150px;
}