Question

我已将此代码笔写为Top Navbar。

此顶部导航栏是包含元素的

<div class="topnav">
  <a href="#home">Home</a>
  <a href="#news" class="active">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<h1>TopNav using div and a elements</h1>

关键的CSS如下：

.topnav {
  background-color: #bbb; /* gray */
  line-height: 50px; /* same as height! */
}

.topnav a {
  height: 50px;
  margin: 0;
  padding: 15px 20px;
  color: black;
  text-decoration: none;
}

我已将链接在

元素中垂直居中，方法是：
1）将每个链接的高度设置为50px，然后
2）给包裹的

相同的行高。
效果很好。

问题是我无法精确控制链接的填充和边距。

现在，我为链接的填充指定了任意值：

  padding: 15px 20px;

但是，每个链接的顶部和底部都有一个很小的间隙，Navbar背景色从中透出。当您将鼠标悬停在链接上时，可以看到这一点。

当鼠标悬停在链接上时，我将链接颜色链接为覆盖整个NavBar。我可以做些精确的计算来确保这一点，而不是为padding-top选择一个任意值吗？

第二，当一个悬停时，每个链节的侧面也存在间隙。当一个鼠标悬停在“活动”链接两侧的链接（绿色链接）上时，可以清楚地看到。我希望消除这种差距。我该怎么办？

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：0)

Answer 1

默认情况下，a标签是inline元素，应将其 display 属性更改为display: inline-block。这样您就可以设置边距和填充。

* {
  box-sizing: border-box;
}

/* Extra small devices (phones) */
body {
  margin: 0;
  background-color: powderblue;
}

.topnav {
  background-color: #bbb; /* gray */
  line-height: 50px; /* same as height! */
}

.topnav a {
  margin: 0;
  padding: 10px 20px;
  color: black;
  text-decoration: none;
  display: inline-block; /* Set inline-block for a tag */
}
  
.topnav {
  background-color: #bbb; /* gray */
  line-height: 50px; /* same as height! */
}


.topnav a.active {
  background-color: mediumseagreen;
  color: white;
}

.topnav a:hover:not(.active) {
  background-color: #f1f1f1; /* light gray */
}

    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news" class="active">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>

    <h1>TopNav using div and a elements</h1>

Answer 2

使用它。我将display:block赋予了a，将display:flex赋予了.topnav

* {
  box-sizing: border-box;
}

/* Extra small devices (phones) */
body {
  margin: 0;
  background-color: powderblue;
}

.topnav {
  background-color: #bbb; /* gray */
  height:50px;
  display:flex;
  line-height: 50px; /* same as height! */
}

.topnav a {
  display:block;
  height: 50px;
  margin: 0;
  padding: 0px 20px;
  color: black;
  text-decoration: none;
}

.topnav a.active {
  background-color: mediumseagreen;
  color: white;
}

.topnav a:hover:not(.active) {
  background-color: #f1f1f1; /* light gray */
}

    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news" class="active">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>

    <h1>TopNav using div and a elements</h1>

如何在NavBar中控制链接边距和填充？

2 个答案: