Question

我的导航栏有一个背景设置，并且在我的链接的左侧和右侧有22px的填充。由于这不准确，我右侧有一点空间，与下面的内容不符。

HTML

<ul>
<li><a href="#">Bikes</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">Featured Merch</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Apparel</a></li>
</ul>

然后我的CSS

 nav ul {
        margin-left: 0px;
    }

 nav li {
        text-decoration: none;
        display: inline;
        text-transform: uppercase;
        font-size: 18px;
    }

    nav a {
        color: white;
        background-color: #4c4d4f;
        padding: 2px 22px;
    }

    nav a:hover {
        color: #FDB813;
        text-decoration: none;
    }

谢谢

Answer 1

首先，display: inline引起了你提到的空间。将其替换为float: left。

然后您可能需要<li> s：

之间的空格

nav li {
    margin-right: 4px;
}

删除上一个<li>的边距：

nav li:last-child {
    margin-right: 0;
}

然后你有你想要的行为。

请参阅jsFiddle

资产净值需要跨页面证明

1 个答案: