我的導航欄無法正確填充 100% 的屏幕寬度。 導航欄中的項目水平對齊

Question

我是 HTML 和 CSS 編碼的新手，並且一直致力於創建一個練習網站。 我的導航欄遇到了這個問題：

當我將寬度更改為 100% 時，導航欄項目彼此水平對齊。 [寬度為 100% 的導航欄圖像

我似乎可以將“.top-level-menu>li”class 的寬度更改為一個非常具體的數字，它會填滿我的屏幕，但它根本不會填滿 100% 的寬度。

 .third-level-menu { position: absolute; top: 0; right: -190px; width: 190px; list-style: none; padding: 0; margin: 0; display: none; }.third-level-menu>li { height: 45px; background-color: #6640C1; background: #6640C1; }.third-level-menu>li:hover { background-color: gold; }.second-level-menu { position: absolute; top: 45px; left: 0; width: 100%; /* width: 273.2px; */ list-style: none; padding: 0; margin: 0; display: none; }.second-level-menu>li { position: relative; height: 45px; background-color: #6640C1; background: #6640C1; width: 100%; }.second-level-menu>li:hover { background-color: gold; }.top-level-menu { background-color: red; list-style: none; padding: 0; margin: 0; width: 100%; height: 100px; z-index: 1; }.top-level-menu>li { position: relative; height: 30px; /* width: 273.2px; */ background: #6640C1; z-index: 2; text-align: center; }.top-level-menu>li:hover { background-color: gold;important. }:top-level-menu li:hover>ul { display; inline. }:top-level-menu a { font-family, 'Fjalla One'; sans-serif: color; #FFFFFF: text-decoration; none: padding; 0 0 0 10px: background; #6640C1: display; block: line-height; 45px. }:top-level-menu a:hover { color; #000000: background-color; gold; }

 <ul class="top-level-menu"> <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li> <li> <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a> <ul class="second-level-menu"> <li><a href="#">Jerseys</a></li> <li><a href="#">Hats</a></li> <li><a href="#">Gym Shorts</a></li> </ul> </li> <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li> <li> <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a> <ul class="second-level-menu"> <li> <a href="#">Soccer</a> <ul class="third-level-menu"> <li><a href="#">Barcelona</a></li> <li><a href="#">PSG</a></li> <li><a href="#">Real Madrid</a></li> </ul> </li> <li> <a href="#">Basketball</a> <ul class="third-level-menu"> <li><a href="#">Golden State Warriors</a></li> <li><a href="#">Celtics</a></li> <li><a href="#">Chicago Bulls</a></li> </ul> </li> <li> <a href="#">Football</a> <ul class="third-level-menu"> <li><a href="#">New England Patriots</a></li> <li><a href="#">Ravens</a></li> <li><a href="#">Atlanta Falcons</a></li> </ul> </li> </ul> <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a> </li> </li> </ul>

任何幫助將不勝感激。

Answer 1

這就是你想要的，我相信。 運行代碼片段以查看實際情況。

希望這有幫助。

我使用了display:flex並修復了一些填充。

 .third-level-menu { position: absolute; top: 0; right: -190px; width: 190px; list-style: none; padding: 0; margin: 0; display: none; }.third-level-menu>li { height: 45px; background-color: #6640C1; background: #6640C1; }.third-level-menu>li:hover { background-color: gold; }.second-level-menu { position: absolute; top: 45px; left: 0; width: 100%; /* width: 273.2px; */ list-style: none; padding: 0; margin: 0; display: none; }.second-level-menu>li { position: relative; height: 45px; background-color: #6640C1; background: #6640C1; width: 100%; }.second-level-menu>li:hover { background-color: gold; }.top-level-menu { list-style: none; width: 100%; height: 100px; z-index: 1; display: flex; }.top-level-menu>li { position: relative; height: 30px; background: #6640C1; z-index: 2; text-align: center; }.top-level-menu>li:hover { background-color: gold;important. }:top-level-menu li:hover>ul { display; inline. }:top-level-menu a { font-family, 'Fjalla One'; sans-serif: color; #FFFFFF: text-decoration; none: background; #6640C1: display; block: line-height; 45px: padding; 0px 15px 0px 15px. }:top-level-menu a:hover { color; #000000: background-color; gold; }

 <ul class="top-level-menu"> <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li> <li> <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a> <ul class="second-level-menu"> <li><a href="#">Jerseys</a></li> <li><a href="#">Hats</a></li> <li><a href="#">Gym Shorts</a></li> </ul> </li> <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li> <li> <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a> <ul class="second-level-menu"> <li> <a href="#">Soccer</a> <ul class="third-level-menu"> <li><a href="#">Barcelona</a></li> <li><a href="#">PSG</a></li> <li><a href="#">Real Madrid</a></li> </ul> </li> <li> <a href="#">Basketball</a> <ul class="third-level-menu"> <li><a href="#">Golden State Warriors</a></li> <li><a href="#">Celtics</a></li> <li><a href="#">Chicago Bulls</a></li> </ul> </li> <li> <a href="#">Football</a> <ul class="third-level-menu"> <li><a href="#">New England Patriots</a></li> <li><a href="#">Ravens</a></li> <li><a href="#">Atlanta Falcons</a></li> </ul> </li> </ul> <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a> </li> </li> </ul>

Answer 2

您可以使用display:flex使其工作。

Made changes to the code snippet here:
.top-level-menu {
            background-color: red;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100px;
            z-index: 1;
            display:flex;
            justify-content:space-between;
        }

        .top-level-menu>li {
            position: relative;
            height: 30px;
            /* width: 273.2px; */
            background: #6640C1;
            z-index: 2;
            text-align: center;
            flex:1;
        }