浮动名单有差距

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%;}