<分区>
<分区>
我正在创建一个有趣的网站，但遇到了一个问题。 我想将所有链接显示为连续的按钮行，但出于某种原因，“关于我们”和“联系我们”这两个按钮仍然分开，即使其他链接的位置很好。 我知道这可能是一个非常简单的修复，但由于某种原因我似乎无法弄清楚。
这是我的 HTML 代码:
header nav .headerbutton {
text-decoration: none;
color: white;
background: black;
font-family: sans-serif;
font-weight: 900;
padding: 10px;
transition: .2s;
margin-right: -3.4px;
}
header nav .headerbutton:hover {
background: red;
}<header>
<nav>
<a href="#" class="headerbutton" id="headerbutton-1">Home</a>
<a href="#" class="headerbutton" id="headerbutton-2">Playing Cards</a>
<a href="#" class="headerbutton" id="headerbutton-3">Top 10s</a>
<a href="#" class="headerbutton" id="headerbutton-4">About Us</a>
<a href="#" class="headerbutton" id="headerbutton-5">Contact Us</a>
</nav>
</header>最佳答案
因为您的 anchor 之间有空格，而浏览器使用内联元素渲染该空格。除了“关于我们”元素之外，您的负边距隐藏了这一事实。您可以完全摆脱负边距规则，只需像这样删除这些元素之间的空格:
header nav .headerbutton {
text-decoration: none;
color: white;
background: black;
font-family: sans-serif;
font-weight: 900;
padding: 10px;
transition: .2s;
}
header nav .headerbutton:hover {
background: red;
}<header>
<nav>
<a href="#" class="headerbutton" id="headerbutton-1">Home</a><a href="#" class="headerbutton" id="headerbutton-2">Playing Cards</a><a href="#" class="headerbutton" id="headerbutton-3">Top 10s</a><a href="#" class="headerbutton" id="headerbutton-4">About Us</a><a href="#" class="headerbutton" id="headerbutton-5">Contact Us</a>
</nav>
</header>关于html - 为什么 "about us"和 "contact us?"之间有一个空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58043932/