html - 如何控制导航栏中的链接边距和填充？

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;

但是，在每个链接的顶部和底部都有一个小间隙，导航栏背景颜色从该间隙显示出来。当您将鼠标悬停在链接上时可以看到这一点。

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

其次，悬停时每个链接的两侧也有一个空隙。当将鼠标悬停在“事件”链接(绿色链接)任一侧的链接上时，可以清楚地看到。我希望消除这个差距。我该怎么做？

最佳答案

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

关于html - 如何控制导航栏中的链接边距和填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54840847/

上一篇：html - 如何使用 calc 正确设置动态高度？

下一篇：html - CSS嵌套的flexbox为什么在有空间时最后一个字换行？

相关文章：

css - 在 CSS 中覆盖继承的 h1 和 h3 值

html - 固定位置父 div 的绝对定位子 div 出现在父 div 之上

css - 请帮助 - IE8 上的 CSS 宽度问题

html - Bootstrap - 使卡片水平滚动

javascript - 表单未在新选项卡中打开

java - 如何启动 javascript 脚本并从 java 传递 DOM 元素，同时拥有纯 html？

css - pinterest 类布局 : box get broke down

javascript - 脚本不按 ID 定位某些元素，在其他元素上运行良好

css - 响应式平台——网格还是无网格？

css - 图片叠加淡入淡出，文字在img淡出后可见

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>