主页与子页面上字母之间的字距调整是关闭的。我不知道为什么他们都在 html 和 css 的导航链接中使用相同的代码。我在下面附上了一些 css 和 html,我不确定只有主页发生了什么,就像我说的所有子页面在这里都有相同的代码。
<header>
<div class="container">
<nav class="navbar">
<div class="logo"><img src="logo/logo_white.svg" alt="vic logo"/>
</div>
<ul class="nav_links">
<li class="active">
<a href="index.html" class="nav_link">home</a>
<li>
<a href="stills.html" class="nav_link">stills</a>
</li>
<li>
<a href="designs.html" class="nav_link">designs</a>
</li>
</ul>
</nav>
</header>
.header {
display: flex;
justify-content: space-between;
align-items: center;
color: #f8f8f8;
}
.navbar {
display: flex;
width: 90%;
justify-content: space-between;
align-items: center;
padding-top: 4px;
padding-bottom: 4px;
font-size: 18px;
}
.logo {
width: 140px;
display: inline-block;
padding-left: 48px;
max-width: 140px;
transition: transform .7s ease-in-out;
}
.logo:hover{
transform: scale(1.4) rotate(10deg);
color: #f8f8f8;
}
.nav_links li {
margin-left: 24px;
}
.nav_links:hover {
color:#91e9d6;
text-decoration: underline;
font-weight: 600;
}
.nav_links, ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.nav_link li {
display: inline-block;
padding: 0px 20px;
}
.nav_link li, a {
display: inline;
float: left;
font-size: 24px;
font-family: "neue-haas-grotesk-display", sans-serif;
margin-left: 16px;
margin-top: 24px;
margin-bottom: 36px;
text-decoration: none;
color: #f8f8f8;
}
/* hover link*/
li, a:hover {
color: #91e9d6;
text-decoration: underline;
font-weight: 600;
}
/* selected link */
li, a:active {
color: orange;
}