CSS导航栏链接背景颜色悬停

Question

我正在为网站创建一个导航栏，我希望当我将光标悬停在它们上面时，菜单元素会改变背景颜色。然而，当我将光标悬停在一个菜单元素上时，如果我仔细查看导航栏，我可以看到导航栏（div）和菜单元素（a）的高度不同。 （红色矩形不像橙色那么高。）它只是一个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;上设置display <a>，填充应该按照要求运行。