Css 有间隙的浮动列表

HTML

我在上面和下面都有间隙，没有间隙我怎么能做到？

---

下面是一个样本，给出一些固定的高度，例如，高度：40px

列表骑乘侧的边界导致了间隙，因为：

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

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

为了解决这个问题，可以使用负的

边距
来补偿边框使用的布局空间。以下是相关变更的CSS：

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

试过了，但是差距变大了，需要挤压所有的样本，但是样本9和样本11仍然有差距：-）对不起，我不太擅长这个
ul {width:400px;}
ul li {width:196px;float:left;border:1px solid blue;height:100%;}

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