Question

我开始使用HTML5创建我的第一个网页，其中包含一些CSS样式。我遇到了一个问题，我希望有人可以为我清理。

我试图在我的菜单项之间腾出空间，如：

ABOUT        HELP       CONTACT

我找到了一个简单的方法来解决这个问题，但它并没有足够好的工作。作为一个例子，我有一个由nav元素创建的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;
}

Answer 2

您可以使用以下内容：

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

像这样，您可以为具有类li的祖先的.nav2元素设置不同的规则。

在菜单项之间留出更大的空间（nav）

2 个答案: