css - 浮动列表有间隙

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

给出一些固定的高度，例如 height: 40px;

Answer 2

列表中骑行侧的边界导致了差距，因为：

• 边框在元素客户区之外，有自己的布局空间。所以一个有边框的元素会比一个没有边框的元素占用更多的空间。

• 右侧列表项的数量大于左侧。所以右侧列表的总空间（总高度）大于左侧列表。

margin为了解决这个问题，可以使用负数来补偿边框使用的布局空间。以下是相关更改的 CSS：

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