html - 在菜单项之间留出更大的空间 (nav)

Question

我开始使用 HTML5 和一些 CSS 样式创建我的第一个网页。我遇到了一个问题，希望有人能帮我解决。

我正在尝试在我的菜单项之间留出空间，例如:

ABOUT        HELP       CONTACT

我已经找到了一个简单的方法来做到这一点，但它做得不够好。例如，我有 2 个菜单是用这样的导航元素创建的:

<nav class="nav2">      
    <li><a href="Højtalere.html">Stereo</a></li>
    <li><a href="Forstærkere.html">Højtalere</a></li>
    <li><a href="åbningstider.html">TV og hjemmebiograf</a></li>
    <li><a href="Computer.html">Streaming</a></li>
    <li><a href="Tilbehør.html">Tilbehør</a></li>
    <li><a href="Kabler.html">Kabler</a></li>       
</nav>  

<nav class="nav3">          
    <li><a href="login.html" style="display: inline;">Text</a></li>
    <li><a href="support.html" style="display: inline;">Text</a></li>
    <li><a href="???.html" style="display: inline;">Text</a></li>           
</nav>

现在我已经用这个 CSS 代码创建了空间:

li {
   display: inline;
   margin-right: 20px;
   }

问题是它为所有 li 元素留出了相同的空间，我该如何编码才能控制让我们说 nav2 应该有 margin-right: 10px，但另一个应该有 40px 的空间之间？

希望你们明白我在做什么

Answer 1

简单地:

li {
    margin-right: 40px;
}
.nav2 li {
    margin-right: 10px;
}