熊与我之间的不规则间隔我在这个列表项

我已经面临列表项之间不规则间隔的问题，新的，它看起来像下面的图片。首先，当我没有许多列表项，这是正常的，那么一旦我超过了一些，我不知道它开始呈现出空间： picture of problem

我发挥它周围的一些显然利润率也没什么用它做。以下是图库和列表项的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>

来源

2016-11-05 HunchoDevelo

这是预期...的'li'有不同的高度，我建议适当的行/列网格系统。同样'

'是一个过时的元素，不应该再使用。 AND'标签不应该用于间距，并且在'ul'中是无效的HTML。 –

@Paulie_D是对的。您可能想尝试[Bootstrap]（http://getbootstrap.com/）来帮助格式化...它使CSS变得更加简单。 :) – yummypasta

@yummypasta是的，我使用BS为他们惊人的模态和旋转木马。虽然我没有使用BS来做这个用途。谢谢PauIie没有使用你的，尽管感谢你的努力！ – HunchoDevelo

您可以使用内嵌式地显示块，而不是浮动，检查下面的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; 
}

来源

2016-11-05 14:40:46

谢谢@SuperUser它的工作，但如果你不介意，你能解释一下你的解决方案吗？为什么我应该使用内联块而不是浮动？ – HunchoDevelo

@HunchoDevelo正如在这个演示中看到的那样 - https://jsfiddle.net/vxrnh8ww/1/ - 这并没有击败物品上的不平等高度，也没有产生任何显着的不同 – LGSon

既然你已经给每个缩略图类试着给大拇指指甲一类造型的宽度和高度，使他们不超越固定电网。

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

来源

2016-11-05 14:38:04 CodeRider

这不适合我，但感谢您的贡献！ – HunchoDevelo

列表项

CSS

HTML

回答

相关问题