html - 边框稍微错位

Question

出于一个奇怪的原因，我的 6 个边框看起来有点乱码。

这是一张图片:

这是我为该列表编写的 CSS block :

#aboutcontent #names li{
    width: 325px;
    border: 1px solid white;
    display: inline-block;
    font-size: 12px;
    line-height: 25px;
}

我希望所有这些边界都完美接触，中间没有空间。

这是一个 jsfiddle

Answer 1

给 ul font-size: 0 或删除 li 之间的空格。行内 block 元素也会考虑空格。你可以阅读这个 here .

<li></li>...<li></li>  // remove whitespace between li

Fiddle Demo

或者

#aboutcontent #names{
    list-style-type: none;
    font-size: 0;
}

Fiddle Demo