html - 导航菜单项在悬停时移动

Question

菜单文本在悬停时变为斜体，但我意识到当一个元素变为斜体时，其他元素会稍微移动位置(可能是因为他们想保留它们之间的水平边距......？)

另一个问题是它在事件状态下不是斜体。

这是网站 https://bkwon0402.github.io/about.html 和代码。将不胜感激帮助!

#nav a:hover {
font-style: italic;
}

#nav a:active {
font-style: italic;
}



}
.nav {
height:         58px;
margin:         0;
margin-left:    0px;
width:          100%;

.nav ul {
position:       absolute;
right:          0px;
height:         0px;
display:        block;
font-family:    "Adobe Garamond Pro"; 
list-style:     none;
margin:         0;
padding:        21px 40px;
color: #595959; 

.nav li {
font-size:  19px;
float:      left;
color: #595959; 
margin-left:40px;
font-family:    "Adobe Garamond Pro"; 

Answer 1

其他元素正在移动，因为它们的宽度正在改变。斜体比常规字体小。如果你给 .nav 列表项一个宽度，这应该可以防止它们四处移动。

此外，您的字体系列和颜色是继承的属性，因此您无需在 css 中再次定义它们。除了 float ，我还建议将它们显示为内联 block 。

.nav li {
   font-size:  19px;
   margin-left:40px;
   width:75px;
   display:inline-block;
}