为什么我的主页导航显示与子页面不同?

问题描述 投票:0回答:0

主页与子页面上字母之间的字距调整是关闭的。我不知道为什么他们都在 html 和 css 的导航链接中使用相同的代码。我在下面附上了一些 css 和 html,我不确定只有主页发生了什么,就像我说的所有子页面在这里都有相同的代码。

homepage nav

subpage nav

    <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;
    }

css hover nav
© www.soinside.com 2019 - 2024. All rights reserved.