修复列表项之间不均匀的间距

Question

这是我第一次尝试制作一个网站，我的导航栏中的链接间距不均匀。是否有一种方法来重写代码，以适当的空间，或者有任何CSS属性，我可以添加来帮助

这是导航条链接的样子

CSS代码:

.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}

.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 2000px;
margin: 0 auto;
padding: 0 50px;
}

.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}

.navbar__item {
height: 100px;
}

.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;

width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;

}

HTML:

<ul class="navbar__menu">
<li class="navbar__item">

<a href="#home" class="navbar__links" id="home-page">Home</a>
</li>
<li class="navbar__item">
<a href="#new" class="navbar__links" id="new-page">New Releases</a>
</li>
<li class="navbar__item">
<a href="#clothing" class="navbar__links" id="clothing-page"
>Clothing</a>

</li>

<li class="navbar__btn">
<a href="#sign-up" class="button" id="signup">Sign Up</a>
</li>
</ul>

Answer 1

使用font - family:宋体;

Answer 2

移除<li>标签的width:125px，然后使用justify-contents: space-around作为父标签。

HTML:

<ul class="navbar">
<li><a>Home</a></li>
<li><a>New Release</a></li>
<li><a>Clothing</a></li>
<li><a>Our Story</a></li>
</ul>

CSS:

.navbar {
background-color: #131313;
color: white;
height: 80px;
display: flex;
align-items: center;
justify-content: space-around;
}
.navbar li {
list-style-type:none;
}