浮動名單有差距

Question

HTML

<ul> 
<li>The quick brown fox jumps over the lazy dog and the cat ran</li> 
<li>sample 2</li> 
<li>sample 3</li> 
<li>sample 4</li> 
<li>sample 7</li> 
<li>sample 8</li> 
<li>sample 9</li> 
<li>The quick brown fox jumps over the lazy dog</li> 
<li>sample 11</li> 
<li>sample 12</li> 
<li>sample 13</li> 
<li>sample 14</li> 
</ul> 

CSS

ul {width:400px;} 
ul li {width:196px;float:left;border:1px solid blue;height:100%;} 

我在上面和下面的差距，我怎樣才能使它沒有差距？ 這裏是一個樣本jsfiddle

Answer 1

給一些固定的高度，比如說說高度：40px;

Answer 2

列表的乘坐側的邊框造成的差距，因爲：

• 邊界是元素客戶區之外，有自己的佈局空間。所以具有邊框的元素會比沒有邊框的元素佔用更多的空間。

• 右側的列表項數大於左側。因此右側列表的總空間（總高度）大於左側列表的總空間。

爲了解決它，負margin可以用於補償由邊界所使用的佈局空間。下面是相關更改CSS：

ul li {width:196px;float:left;border:1px solid blue;margin:-1px;height:100%;}