列表項之間的差距

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一起使用它會起作用