導航欄文本向後對齊（CSS）

Question

我正在開發我的第一個網站，我遇到了導航欄的問題。我使用CSS規則來對齊欄，但不幸的是，當我將規則設置爲float:right;時，我的文本正好浮動，但它在欄上向後排隊。如何將文本浮動到右側並正確對齊文本？

.nav ul li { 
 
    display: inline-block; 
 
    float: right; 
 
    padding: 10px 10px; 
 
} 
 
.nav { 
 
    background-color: black; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0px; 
 
    margin: auto; 
 
    font-weight: bold; 
 
    border-bottom: 2px solid orange; 
 
    margin-top: 5px; 
 
} 
 
.nav ul li a { 
 
    color: orange; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.05em; 
 
    padding: 0px 10px; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    <li><a href="#">Portfolio</a> 
 
    </li> 
 
    <li><a href="#">FAQ</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

您需要浮動ul列表，而不是單獨的列表項li。

設置float: right on li允許第一個列表項與右邊第一個對齊，然後其餘的項目以相似的方式佔據他們的位置。它從右到左引起了列表的方向。

.nav ul { 
 
    float: right; /* Added */ 
 
} 
 
.nav ul li { 
 
    display: inline-block; 
 
    padding: 10px 10px; 
 
    /* float: right; Removed */ 
 
} 
 
.nav { 
 
    background-color: black; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0px; 
 
    margin: auto; 
 
    font-weight: bold; 
 
    border-bottom: 2px solid orange; 
 
    margin-top: 5px; 
 
} 
 
.nav ul li a { 
 
    color: orange; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.05em; 
 
    padding: 0px 10px; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    <li><a href="#">Portfolio</a> 
 
    </li> 
 
    <li><a href="#">FAQ</a> 
 
    </li> 
 
    </ul> 
 
</div>