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 s的常见问题，您应该删除元素之间的空白区域。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

参考：Fighting the Space Between Inline Block Elements

Answer 2

请重置父元素font-size: 0和line-height: 0 然后在子元素上设置必需的font-size和line-height 像这样

nav li{
    display: inline-block;
    background-color:blue;
    width: 70px;
    padding: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;

}
nav li:first-child  {
    border-radius: 5px 0 0 5px;
}
nav li:last-child{border-radius: 0 5px 5px 0;}
nav ul{
    font-size: 0;
    line-height: 0;
}
nav li:hover{
    background: #333;
}

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

如何修复导航中的保证金

2 个答案: