Question

我正在创建一个娱乐网站，但遇到了一个问题。我想将所有链接显示为连续的按钮行，但是尽管其他链接位置很好，但由于某些原因两个按钮“关于我们”和“联系我们”仍然分开。我知道这可能是一个非常简单的修复程序，但是由于某些原因，我似乎无法弄清楚。

这是我的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>

Answer 1

因为锚点之间有空格，并且浏览器使用嵌入式元素来呈现该空格。除“关于我们”元素外，您的负利润隐藏了这一事实。您可以完全消除该负边距规则，而只需删除这些元素之间的空格，如下所示：

UPDATE tbl_classes SET 
fees_balance=T2.fees_balance + 7000
FROM tbl_classes T2 WHERE CAST(tbl_classes.mobile_number AS TEXT)
LIKE '%71000001' RETURNING tbl_classes.fees_balance;

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;
}

Answer 2

因为您在每个元素上使用负边距。为nav元素提供一个display: flex：

header nav .headerbutton {
  text-decoration: none;
  color: white;
  background: black;
  font-family: sans-serif;
  font-weight: 900;
  padding: 10px;
  transition: .2s;
  white-space: pre;
}

header nav .headerbutton:hover {
  background: red;
}

nav{
   display: flex;
}

<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>

为什么在“关于我们”和“联系我们”之间留有空间？

2 个答案: