浮点数列表存在间隙

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。

- Francis Alvin Tan

Answer 1

列表右侧的边框导致间隙，原因如下：

• 边框位于元素客户区之外，并具有自己的布局空间。因此，带有边框的元素将占用比没有边框的元素更多的空间。

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

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

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

- Jay

---

谢谢，但是示例9和示例11仍然有差距 :-) 抱歉，我不太擅长这个。 - Francis Alvin Tan

Answer 2

给定一个固定的高度，比如说，height: 40px;

- Vinesh EG

---

尝试过那种方法，但是间隙变得更大了，需要把它全部压缩。 - Francis Alvin Tan