Неравномерное Расстояние Между Элементами Списка

Медведь со мной я новичок в этом

Я столкнулся с проблемой неравномерного расстояния между элементами списка, это выглядит как изображение ниже. Во-первых, когда я не так много элементов списка, это было нормально, то как только я превысил число, которое я не знаю, он начал показывать пробелы:
картина проблемы

Я играл с ним, и, по-видимому, маржи не имеют ничего общего с ним. Ниже приведен код 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>

2 ответа

  1. Так как вы дали каждому эскизу класс, попробуйте дать ногтям большого пальца класс ширины и высоты стиля, чтобы они не выходили за пределы фиксированной сетки.

    <style>
    #thumbs
    {
        max-width:150px;
        max-height:300px;
    }
    </style>
    
  2. Вместо float можно использовать display inline block, проверьте следующий 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;
    }