HunchoDevelo HunchoDevelo - 1 month ago 8
CSS Question

Irregular Spacing Between List Items

Bear with me I am new at this

I have been faced with an issue of irregular spacing between list items, it looks like the image below. First, when I did not as many list items, it was normal, then once I exceeded a number, which I do not know it started showing spaces.

picture of problem

I played around with it some and apparently margins have nothing to do with it. Below are the HTML5 code and the CSS for the gallery and the list items.

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

You can use display inline block instead of float, check following 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;
}