浮立成格子圖案留下不需要的間距

在非常高的水平，這是我的HTML：浮立成格子圖案留下不需要的間距

<ul> 
    <li>Item1</li> 
    <li>Item2</li> 
    ... 
    <li>Item21</li> 
</ul>

，這是我的CSS：

li { 
    display: block; 
    float: left; 
    margin: 0.3em; 
    padding: 2px; 
    max-width: 10em; 
    min-width: 10em; 
    min-height: 12em; 
    border: 1px solid rgb(230, 230, 230); 
    background-color: rgb(250, 250, 250); 
}

我的目的是安排列表項目變成3x7網格模式，但實際發生的情況是：前6個項目按照我希望的方式在3x2網格中完全顯示。然而，第七個顯示在它自己的一行上，一直浮在容器div的右邊，其餘的「行」都是空白的。然後模式繼續下一行。 Here's a picture of what it looks like

我的列表中有14個項目，所以我可以確認這個模式至少重複一次。我的問題是，如果任何人都可以告訴我爲什麼只有第七項以這種方式行事，而我能做些什麼來解決它。

來源

2012-09-15 Jason Baker

問題在哪裏？ http://jsfiddle.net/5v4Bm/1/show/ – yckart

你應該包括整個CSS，因爲當提供的代碼放在HTML文件中時，它可以正常工作。所以其他風格可能會影響它。 – Jay

我覺得它可能只是在我的瀏覽器樣式中，但我不確定會造成什麼 –

出於某種原因，您的第五項比您提供的截圖中的其他項高出1px。這是導致第七個項目行爲的原因。再次看看你的代碼，看看你對第五個項目做了什麼，導致它比其他項目更高。

來源

2012-09-16 20:11:18

我不確定我在做什麼，但我會仔細看一看 - 謝謝！ –

浮立成格子圖案留下不需要的間距

回答

相關問題