html - CSS 导航栏链接背景色悬停

Question

我正在为网站创建一个导航栏，我希望当我将光标悬停在菜单元素上时，菜单元素会更改背景颜色。然而，颜色更改部分有效，如果我在将光标悬停在一个菜单元素上时仔细查看导航栏，我可以看到导航栏 (div) 和菜单元素 (a) 的高度不同。 (红色矩形不如橙色矩形高。)它只有 1 px 左右，但确实很烦人。我使用 20px 填充作为高度，但显然出了点问题，我确信有更好的方法可以让它工作。顺便说一下，我是网络开发和 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> ，填充应按要求运行。