html - CSS网格样式导航菜单间距

Question

我正在尝试创建一个网格样式的导航菜单，我已经完成了。这是一个 jsFiddle我到目前为止所拥有的。如果将鼠标悬停在链接上，您会看到左右栏之间有 1 或 2 像素的间隙，我似乎无法摆脱它。

目前我有:

#nav {
    float:left;
    width:230px;
    display:inline;
    text-align:right;
}

#footer li {
    display:inline-block;
    text-align:left;
    line-height:32px;
    text-indent:10px;
    width:49%;
}

如果我设置 li {width:50%} 列表不适合 2 列，但是当它设置为 49% 时我得到列表元素之间的间隙。某处一定有一些填充或边距，但我看不到。任何帮助都会很棒。

Answer 1

我最喜欢的修复方法是在父级中使用 font-size: 0，然后在子级中恢复字体大小。发生的情况是 html 代码中的物理空间(例如，在元素后按 enter)呈现代码中的物理空间，也就是 li 之间的空间。 font-size: 0 将该空间呈现为无物理宽度，因此允许两个 50% li。

#nav {
    font-size: 0;
}
#nav ul li {
    font-size: 15px;
}

查看:http://jsfiddle.net/3XqZ3/9/

另一种选择是使用 float 使元素彼此相邻。这也摆脱了两者之间的空间。

#nav ul li {
    float: left;
}

第三种选择是确保 html 中的元素之间没有中断。喜欢:

<li>This is an li</li><li>This is another li</li>

或者:

<li>This is an li</li><!--
--><li>This is another li</li>