Нерегулярное Интервалы между элементы списка

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

Вы можете использовать дисплей встроенный блок вместо поплавка, проверьте следующее 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; 
} 

Answer 2

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

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