边框稍微错位

Question

奇怪的是，我的 6 个边框看起来有点乱码。

这是一张图片：

这是我的 CSS 列表中的一部分：

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

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

这是一个jsfiddle

Answer 1

试试这个

#aboutcontent #names li{
    width: 325px;
    border: 1px solid white;
    float:left;
    font-size: 12px;
    line-height: 25px;
    margin: 0 7px 5px 0;
}

Answer 2

在 #aboutcontent #names li

中添加 float:left; 而不是 inline-block

CSS:

#aboutcontent #names li{    
    float:left;
}

DEMO

Answer 3

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

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

Fiddle Demo

或

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

Fiddle Demo

Answer 4

看过 css-tricks.com

最简单的方法。关闭下一行的 li 标签！看似有线，但确实有效。

示例：

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

边框稍微错位

borders slightly misaligned

html

css

border