如何讓我的導航鏈接響應但又不超過 50%？

Question

我正在嘗試將 PSD 變成一個用於練習的網站，並且我正在嘗試找出將導航轉換為代碼的最佳方法。

這是我正在嘗試重新創建的內容

HTML

    <nav class="main-nav">
        <img src="img/icon.png" alt="" class="logo">
        <ul class="menu">
            <li><a href="">Stories</a></li>
            <li><a href="">Events</a></li>
            <li><a href="">Places</a></li>
            <li><a href="">Boards</a></li>
        </ul>
    </nav>

CSS

.main-nav {
    display: flex;
    align-items: center;
    padding: 40px 0;
    justify-content: space-around
}
.main-nav ul {
    display: flex;
    font-family: "LeagueSpartan";
    text-transform: uppercase;
    font-size: 12px;
}
.main-nav ul li {
    letter-spacing: 8px;

}

Answer 1

檢查此代碼段，現在您只需要更新font-family即可獲得您想要的結果！

 .main-nav { display: flex; align-items: center; padding: 40px 0; justify-content: space-around } .main-nav ul { display: flex; font-family: "LeagueSpartan"; text-transform: uppercase; font-size: 12px; list-style: none; } .main-nav ul li { letter-spacing: 5px; padding-right: 30px; font-weight: bold; } .main-nav ul li a { text-decoration: none; }

 <nav class="main-nav"> <img src="img/icon.png" alt="" class="logo"> <ul class="menu"> <li><a href="">Stories</a></li> <li><a href="">Events</a></li> <li><a href="">Places</a></li> <li><a href="">Boards</a></li> </ul> </nav>

希望這可以幫助！