顶部导航列表项边距错误

Question

我正在制作网站的顶级导航。菜单有一个保证金错误。

我为列表项以及margin / padding : 0定义了display: inline-block。

请参阅演示：http://tinkerbin.com/495Qb956

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

Answer 1

默认情况下显示：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这些浮动元素之后的元素。