css - 顶部导航列表项边距错误

Question

我正在制作一个网站的顶部导航。菜单存在边距错误。

我已经margin / padding : 0为列表项以及display: inline-block.

查看演示：http ://tinkerbin.com/495Qb956

基本上我想从列表项中删除左/右边距，并知道为什么会有这个边距。

Answer 1

默认情况下display:inline-block从左边获取边距。像这样写：

.top-right ul {
    background:black;
    height:43px;
    font-size:0;
}
.top-right ul li {
    display:inline-block;
    border:1px solid red;
        margin:0;
        padding:0;
        font-size:13px;
}

检查这个http://tinkerbin.com/YWeV7osy

Answer 2

你看到的那个房间是街区之间的空间。如果删除 和 之间的所有空格</li>，<li>您会看到空格消失。基本上，内联块的行为就像句子中的一个单词，并且其中两个块之间的任何空白都将折叠成 1 个空格字符。

一种解决方案是使用浮动使块粘在一起：

li { float: left; }

您可能需要clear这些浮动元素之后的元素。