我目前正在处理的导航栏有两个问题。第一个问题是关于导航栏链接上的悬停功能。我的目的是当用户将鼠标悬停在导航栏中的链接上时，显示紫色下划线（#9908ff）。但是，CSS 中的悬停代码未按预期运行。
第二个问题是关于导航栏中 3 个部分的对齐。我的徽标位于左侧，导航栏链接位于中间，按钮位于右侧。当我尝试在右侧两个按钮之间添加空间，以实现各部分之间的间距更加平衡时，挑战就出现了。目前，右侧的按钮显得非常拥挤。我该如何解决这个问题？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/test.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fake News and Critical Thinking</title>
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/952dcc46a8.js" crossorigin="anonymous"></script>
<!-- google font import; montserrat -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- google font import; gabarito -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- header -->
<header>
<div class="nav-container">
<img src="/img/IV-3.png" alt="logo" class="logo">
<nav>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Current Affairs</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
<div class ="nav-btns">
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
<a href="#"><i class="fa-sharp fa-solid fa-bars"></i></a>
</div>
</div>
</header>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
margin-top: 20px;
background: #0b0e16;
}
.logo {
width: 200px;
cursor: pointer;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
a {
font-family: 'Gabarito', cursive;
font-weight: 500;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
display: inline-block;
margin: 20px;
}
.nav-links li a:hover,
.nav-links li a.active {
color: #ece0ff;
}
.nav-links li a:hover::after,
.nav-links li a.active::after {
content: "";
width: 100%;
height: 4px;
background: #9908ff;
position: absolute;
bottom: -4px;
left: 0px;
}
提前致谢
对于导航按钮之间的间距，您可以使用：
.nav-btns a { text-indent: 11px; } .nav-btns { width: 70px; }
对于悬停时的下划线菜单，您可以使用：
.nav-links li a:hover { border-bottom: 1px solid #9908ff; }