html - 资产净值需要跨页面证明

Question

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

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