html - 如何修复导航中的边距

Question

我有这个代码:

nav li{
    display: inline-block;
    background-color:blue;
    width: 70px;
    padding: 5px;

}
nav li:first-child, nav li:last-child {
    border-radius: 5px;
}

<nav>
        <li>Home</li>
        <li>Work</li>
        <li>Contact</li>
</nav>

我想删除右边距。我该怎么做？我试过:

margin:0
padding:0

它不起作用。

Answer 1

这是 inline-block 的一个常见问题，您应该删除元素之间的空白。

nav li{
    display: inline-block;
    background-color:blue;
    width: 70px;
    padding: 5px;

}
nav li:first-child, nav li:last-child {
    border-radius: 5px 0 0 5px;
}
nav li:last-child {
    border-radius: 0 5px 5px 0;
}

<nav>
        <li>Home</li><!--
        --><li>Work</li><!--
        --><li>Contact</li>
</nav>

引用:Fighting the Space Between Inline Block Elements