列表项之间的差距

Question

我做了一个包含几个玩家的列表，但是列表项之间有空白，不应该有空白。 这是链接： http : //www.ostameerbeke.be/spelerskernB.html 。

HTML：

        <ul id="beloften">           
            <li><a href="B1.jpg" rel="shadowbox[spelers]"><img src="B11.jpg" width="180px" alt="speler"/></a><p><strong>BUGDAYCI</strong> </p><p>Taner</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>CIRPI</strong> </p><p>Umit</p></li>
            <li><a href="B3.jpg" rel="shadowbox[spelers]"><img src="B31.jpg" width="180px" alt="speler"/></a><p><strong>DE BEULE</strong> </p><p>Bram</p></li>
            <li><a href="B4.jpg" rel="shadowbox[spelers]"><img src="B41.jpg" width="180px" alt="speler"/></a><p><strong>DE CONINCK</strong> </p><p>Toon</p></li>
            <li><a href="B5.jpg" rel="shadowbox[spelers]"><img src="B51.jpg" width="180px" alt="speler"/></a><p><strong>DE COOMAN</strong> </p><p>Rik</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE COOMAN</strong> </p><p>Wim</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE KEGEL</strong> </p><p>Gregory</p></li>
            <li><a href="B8.jpg" rel="shadowbox[spelers]"><img src="B81.jpg" width="180px" alt="speler"/></a><p><strong>DE NUTTE</strong> </p><p>Bram</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE REUSE</strong> </p><p>Laurens</p></li>
            <li><a href="B10.jpg" rel="shadowbox[spelers]"><img src="B101.jpg" width="180px" alt="speler"/></a><p><strong>DE SMET</strong> </p><p>Sigi</p></li>
            <li><a href="B11.jpg" rel="shadowbox[spelers]"><img src="B111.jpg" width="180px" alt="speler"/></a><p><strong>HAJIOUI</strong> </p><p>Yassin</p></li>
            <li><a href="B12.jpg" rel="shadowbox[spelers]"><img src="B121.jpg" width="180px" alt="speler"/></a><p><strong>LETTENS</strong> </p><p>Daan</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>LEYSSENS</strong> </p><p>Bedner</p></li>
            <li><a href="B15.jpg" rel="shadowbox[spelers]"><img src="B151.jpg" width="180px" alt="speler"/></a><p><strong>MOYSON</strong> </p><p>Pieter</p></li>
            <li><a href="B16.jpg" rel="shadowbox[spelers]"><img src="B161.jpg" width="180px" alt="speler"/></a><p><strong>NOTAERTS</strong> </p><p>Kevin</p></li>
            <li><a href="B17.jpg" rel="shadowbox[spelers]"><img src="B171.jpg" width="180px" alt="speler"/></a><p><strong>PAPPAERT</strong> </p><p>Pieter</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>ROBLEDO GONZALEZ</strong> </p><p>Adrian</p></li>
       </ul>

和CSS：

    #beloften {
  list-style-type: none;
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
}

#beloften li {
  margin: 0px auto;
  float: left;
  width: 170px;
  padding: 12px;
  text-align: center;
}

我究竟做错了什么？

这是此代码的有效Jsfiddle：有效示例

Answer 1

删除填充

#beloften li {
  margin: 0px auto;
  float: left;
  width: 170px;
  padding: 12px; /* here */
  text-align: center;
}

或者，通过使用box-sizing将填充内容包括在宽度计算box-sizing 。

#beloften li {
    margin: 0px auto;
    float: left;
    width: 170px;
    padding: 12px;
    text-align: center;
    box-sizing: border-box; /* add this */
}

Answer 2

您可以进行文本对齐：以父级为中心：

 #beloften {
    text-align: center; /* add this */
    list-style-type: none;
    width: 1000px;
    margin: 0px auto;
    padding: 0px;
}

然后从列表项中删除浮点数，并以内联块形式显示它们：

#beloften li {
    display: inline-block; /*add this */
    margin: 0px auto;
    /* float: left; */  /* remove this */
    width: 170px;
    padding: 12px;
    text-align: center;
}

这导致我认为您追求的是：

http://imgur.com/ESovzet

Answer 3

从列表项中删除浮动元素，并内联显示它们：

#beloften li {
display: inline-block;
margin: 0px auto;
width: 170px;
padding: 12px;
text-align: center;

}

Answer 4

看完您的页面，我可以看到您的问题所在。

您的播放器图像的尺寸为180x180但您的支架图像的180x182为180x182 ，支架图像上的额外高度导致其显示错误。

尝试：

1. 将持有人图片重新创建为180x180

2. 加上max-height: 180px; 到你的img元素

Answer 5

从列表项中删除浮动元素，并内联显示它们：

CSS代码：

#beloften li {
    display: inline-block;
    margin: 0px auto;
    /* float: left; */ Remove
    width: 170px;
    padding: 12px;
    text-align: center;
}

Answer 6

DEMO

 #beloften li p { line-height: 0px; } 

与您的CSS一起使用它会起作用