我的導航欄內容彼此合并-有解無憂

我的導航欄的 3 個中心元素已全部合并在一起。我曾嘗試在內容之間留出余量，但似乎沒有任何效果，這就是它的外觀

@import url('https://fonts.googleapis.com/css2?family=Great Vibes&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.nav-item {
    margin-left: 10rem;
}

.nav-link {
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

.nav-link:hover {
    color: #482ff7;
}

.topnav {
    position: relative;
    overflow: hidden;
    background-color: #333;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: black;
    text-decoration: none;
}

.topnav a.active {
    color: white;
}

.topnav-centered a {
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
}

.topnav-right {
    float: right;
}

.nav-logo {
    font-size: 4.1rem;
    font-weight: 400;
    color: #a9a9a9;
    font-family: "Great Vibes", Georgia, serif, system-ui;
    text-decoration: none;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

<!doctype html>
<html lang="en">

<head>
    <title>Mercantilism Services LLP</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css" type="text/css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

    <div class="topnav">

        <a href="#" class="nav-logo">Mercantilism Services LLP</a>
        <div class="topnav-centered">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">CONTACT Us</a></li>
            <li class="nav-item"><a href="#" class="nav-link">BLOG</a></li>
        </div>
        <div class="topnav-right">
            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
                <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
              </svg></a>
            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
              </svg></a>
        </div>
        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>

    </div>


</body>

</html>

任何幫助，將不勝感激。此外，無論我多么努力，字體大小似乎都會改變徽標。請如果有人有任何建議......

uj5u.com熱心網友回復：

您正在使用position: absolute;fora元素。洗掉它（也不需要左、上和變換）。并添加display: flex;到.topnav-centered元素，考慮更改為ul標簽，這是li標簽的正確父級。此外，在代碼剪斷中，您提供的徽標中的字體正在作業。

uj5u.com熱心網友回復：

這是正確的css。如果你愿意，你可以改變它。

    @import url('https://fonts.googleapis.com/css2?family=Great Vibes&display=swap');
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    li {
      list-style: none;
    }
    
    a {
      text-decoration: none;
    }

    .nav-link {
      font-size: 1.6rem;
      font-weight: 400;
      color: #475569;
    }
    
    .nav-link:hover {
      color: #482ff7;
    }
    
    .topnav {
      background-color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
    }
    
    .topnav a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      color: black;
      text-decoration: none;
    }
    
    .topnav a.active {
      color: white;
    }
    
    .topnav-centered li{
      float:left;
    }
    
    .nav-logo {
      font-size: 4.1rem;
      font-weight: 400;
      color: #a9a9a9;
      font-family: "Great Vibes", Georgia, serif, system-ui;
      text-decoration: none;
      padding-top: 2rem;
      padding-bottom: 3rem;
    }

    @media only screen and (min-width: 480px){
      .topnav{
        flex-direction: row;
      }
    }

我洗掉了整個.topnav-centered a和.nav-item塊并將其替換為

    .topnav-centered li{
      float:left;
    }

并更改.topnav為一個 flex 容器以對齊所有內容，并進行一些細微的調整。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326578.html

標籤：html css

上一篇：為什么我的文字不換行并被切斷？

下一篇：按鈕未對齊