Html 在菜单项之间留出更大的空间（导航）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27801704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a bigger space between menu items (nav)
提问by Mikkel
I started creating my first web-page with HTML5 and some CSS styles in it. I have faced a problem i was hoping some could clear out for me.
我开始用 HTML5 和一些 CSS 样式创建我的第一个网页。我遇到了一个问题，我希望有人能帮我解决。
I'm trying to make space between my menu items like:
我正在尝试在菜单项之间留出空间，例如：
ABOUT HELP CONTACT
I have found a simple method in how to do that, but it does not do the job good enough. As an example i have 2 menus created out of an nav element like this:
我找到了一个简单的方法来做到这一点，但它做得不够好。作为一个例子，我有 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>
Right now i have made the space with this css code:
现在我已经用这个 css 代码创建了空间：
li {
display: inline;
margin-right: 20px;
}
The problem is that it makes the same space for all the li elements, how do i code it so i can control lets say the nav2 should have margin-right: 10px, but the other should have 40px in space between?
问题是它为所有 li 元素提供了相同的空间，我如何编码它以便我可以控制让我们说 nav2 应该有 margin-right: 10px，但另一个应该有 40px 之间的空间？
Hope you guys understand what i'm trying to do
希望你们明白我在做什么
采纳答案by Super Babaca
simply:
简单地：
li {
margin-right: 40px;
}
.nav2 li {
margin-right: 10px;
}
回答by Alex Char
You can use the following:
您可以使用以下内容：
.nav2 li {
margin-right: 20px;
}
li {
display: inline;
margin-right: 40px;
}
Like this you set different rule to lielements that has ancestor with class .nav2.
像这样，您为li具有 class 祖先的元素设置了不同的规则.nav2。
