列表项之间的间距不规则

Question

请多多包涵，我是新手

我遇到过列表项之间间距不规则的问题，如下图所示。首先，当我没有那么多列表项时，这是正常的，然后一旦我超过了一个数字，我不知道它开始显示空格：

我试了一下，显然边距与它无关。下面是图库和列表项的 HTML5 代码和 CSS。这是我的代码：

CSS

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin-left: 2.5%;
  margin-bottom: 2.5%;
  background-color: #212121;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

HTML

<ul id="gallery">
            <br>
            <li class="search-item" data-title="Abraham Lincoln">
                <div id="al1930">
                    <img id="as1930" class="thumbs" onclick="transport(movie1.title, movie1.description, movie1.director, movie1.distributer, movie1.releasedate, movie1.link)" src="img/Abraham%20Lincoln%20Poster.jpg" alt="">
                </div>
                <center>
                    <p>Abraham Lincoln</p>
                </center>
            </li>
            <li class="search-item" data-title="Night of the Living Dead">

                <div id="nld1968">
                    <img id="nld1968" class="thumbs" onclick="transport(movie2.title, movie2.description, movie2.director, movie2.distributer, movie2.releasedate, movie2.link)" src="img/p3946_d_v8_ac.jpg" alt="">
                </div>
                <center>
                    <p>Night of the Living Dead</p>
                </center>
            </li>
            <li class="search-item" data-title="Africa Screams">
                <div id="as1949">
                    <img id="as1949" class="thumbs" onclick="transport(movie3.title, movie3.description, movie3.director, movie3.distributer, movie3.releasedate, movie3.link)" src="img/images.jpeg" alt="">
                </div>
                <center>
                    <p>Africa Screams</p>
                </center>
            </li>
            <li class="search-item" data-title="Born To Win">
                <div id="btw1971">
                    <img id="btw1971" class="thumbs" onclick="transport(movie5.title, movie5.description, movie5.director, movie5.distributer, movie5.releasedate, movie5.link)" src="assets/Dvd_Born_to_Win.jpg" alt="">
                </div>
                <center>
                    <p>Born to Win</p>
                </center>
            </li>
            <li class="search-item" data-title="Meet John Doe">
                <div id="mjd1941">
                    <img id="mjd1941" class="thumbs" onclick="transport(movie6.title, movie6.description, movie6.director, movie6.distributer, movie6.releasedate, movie6.link)" src="assets/220px-Poster_-_Meet_John_Doe_01.jpg" alt="">
                </div>
                <center>
                    <p>Meet John Doe</p>
                </center>
            </li>
            <li class="search-item" data-title="Charade">
                <div id="c1963">
                    <img id="c1941" class="thumbs" onclick="transport(movie7.title, movie7.description, movie7.director, movie7.distributer, movie7.releasedate, movie7.link)" src="img/220px-Charade_movieposter.jpg" alt="">
                </div>
                <center>
                    <p>Charade</p>
                </center>
            </li>
            <li class="search-item" data-title="The Terror">
                <div id="tt1963">
                    <img id="tt1963" class="thumbs" onclick="transport(movie8.title, movie8.description, movie8.director, movie8.distributer, movie8.releasedate, movie8.link)" src="img/the-terror.jpg" alt="">
                </div>
                <center>
                    <p>The Terror</p>
                </center>
            </li>
            <li class="search-item" data-title="Angel and the Badman">
                <div id="ab1947">
                    <img id="ab1947" class="thumbs" onclick="transport(movie9.title, movie9.description, movie9.director, movie9.distributer, movie9.releasedate, movie9.link)" src="img/AngelandtheBadman.jpeg" alt="">
                </div>
                <center>
                    <p>Angel and the Badman</p>
                </center>
            </li>
            <li class="search-item" data-title="Rock, Rock, Rock!">
                <div id="rrr1956">
                    <img id="rrr1956" class="thumbs" onclick="transport(movie10.title, movie10.description, movie10.director, movie10.distributer, movie10.releasedate, movie10.link)" src="img/RockRockRock.gif" alt="">
                </div>
                <center>
                    <p>Rock, Rock, Rock!</p>
                </center>
            </li>

        </ul>

Answer 1

由于您已经为每个缩略图指定了一个 class，请尝试为缩略图指定一个 class 样式宽度和高度，这样它们就不会超出固定的网格范围。

<style>
#thumbs
{
    max-width:150px;
    max-height:300px;
}
</style>

Answer 2

您可以使用显示内联块而不是浮动，检查以下内容css

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0px; 
}
#gallery li {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    width: 45%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
    background-color: #212121;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

列表项之间的间距不规则

Irregular Spacing Between List Items

html

css

listitem

CSS

HTML