CSS网格式导航菜单间距

我想创建一个网格式导航菜单，我已经完成了。这是我迄今为止的jsFiddle。如果将鼠标悬停在链接上，可以看到左侧和右侧列之间存在1或2像素的间隔，我似乎无法摆脱它。CSS网格式导航菜单间距

目前我有：

#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％，我得到列表元素之间的差距。某处有一些填充或边距，但我看不到它。任何帮助都会很棒。

来源

2013-11-15 tomsullivan1989

这是因为'inline'元素尊重标记中的空白..这是你想要的..我没有改变任何CSS .. http://jsfiddle.net/JoshC/3XqZ3/10/？ [看到这个答案]（http://stackoverflow.com/questions/19038799/unexplainable-gap-between-divs/19038859#19038859） –

'display：inline-block'是你的罪魁祸首。它将在每个块元素之间放置一个空格。 – Ally

我最喜欢的解决这个的方法是使用在父font-size: 0，然后恢复在字体大小孩子。会发生什么情况是，您的html代码中的物理空间（例如，在元素后按Enter）会在代码中呈现物理空间，也就是li之间的空间。 font-size: 0将该空间呈现为没有物理宽度，因此允许两个50％。

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

来源

2013-11-15 16:10:18 Chad

您应该使用，而不是显示浮动，就像这样：

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

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

来源

2013-11-15 16:09:25 Duver

即白的空间由您inline-block秒。因为它们是“内联”的，所以您的空白空间会被考虑在内。

有很多方法可以解决这个问题。一是注释掉空白：

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

JSFiddle

或者你可以使用浮动：

#footer li { 
    float:left; 
}

JSFiddle

来源

2013-11-15 16:12:16 George

CSS网格式导航菜单间距

回答

相关问题