CSS导航栏链接背景色悬停

Question

我正在为网站创建导航栏，并且希望将鼠标悬停在菜单元素上时更改菜单颜色。 但是，如果我将光标悬停在一个菜单元素上时仔细观察导航栏，则变色部分会起作用，我可以看到导航栏（div）和菜单元素（a）的高度不同。 （红色矩形不如橙色矩形高。）大约只有1 px，但这确实很烦人。 我使用20px填充作为高度，但是显然有些地方不对，我敢肯定有一种更好的方法可以使它起作用。 顺便说一下，我是Web开发和CSS的新手。

  div { background-color: orange; padding: 20px; } a { padding: 20px; } a:hover { background-color: red; } 

  <div> <a href="">Menu 1</a> <a href="">Menu 2</a> </div> 

感谢您的帮助。

Answer 1

你有没有尝试过：

div {
    background: orange;
}

a {
    display: inline-block;
    padding: 20px;
}

通过设置显示： inline-block; 在您的<a> ，填充应符合要求。