html - 如何在不更改悬停效果的情况下使页面上的按钮和链接以相同的高度显示？

问题是，每当我更改按钮的填充以适合链接高度时，在链接的悬停效果中都会得到一个小的空白。您可以在下面的小提琴中看到：

.navbar a {
    float: left;
    font-size: 16px;
    color: #b58b23;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown .drpbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: #b58b23;
    padding: 14px 16px;
    background-color: inherit;
}

https://jsfiddle.net/m8yb8645/

最佳答案

这两个padding不匹配，但是为了解决您的问题，它们应该匹配：

.navbar a {
  padding: 14px 16px;
}

.dropdown .drpbtn {
  padding: 17px 16px; /* needs to match with the above, so 14px 16px */
}

Updated fiddle

关于html - 如何在不更改悬停效果的情况下使页面上的按钮和链接以相同的高度显示？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48260905/