我开始创建我的第一个网页,里面有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 应该有边距右:10px,但另一个应该有 40px 之间的空间?
希望你们明白我想做什么
简单地说
:
li {
margin-right: 40px;
}
.nav2 li {
margin-right: 10px;
}
您可以使用
以下内容:
.nav2 li {
margin-right: 20px;
}
li {
display: inline;
margin-right: 40px;
}
像这样,您设置了不同的规则来li
具有类.nav2
祖先的元素。