Question

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

目前我有：

#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 s。

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

检查出来：http://jsfiddle.net/3XqZ3/9/

另一种选择是使用浮动来使元素彼此相邻。这也消除了两者之间的空间。

#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>

Answer 2

这是由inline-block引起的空白区域。因为它们是“内联”，所以会考虑您的空白区域。

有很多方法可以解决这个问题。一个是评论空白：

<li class="green"><a href="#">Home</a></li><!--
--><li class="green"><a href="#">FAQs</a></li>

JSFiddle

或者你可以使用浮动：

#footer li {
    float:left;
}

JSFiddle

Answer 3

您应该使用float而不是display，如下所示：

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

演示：http://jsfiddle.net/3XqZ3/11/

CSS网格式导航菜单间距

3 个答案: