導航條HTML和CSS

Question

我正在一個導航欄上，它目前看起來是這樣的：

現在我想的是，文本浮動到右邊。所以紅色的空間在左側。但是，如果嘗試「浮動：權利」，它看起來像這樣：

紅色背景消失。我使用了額外的div（columnsection），但在最好的情況下，我想擺脫它。我希望有人能幫助我。

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#navbar { 
 
    margin: auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
#navbar ul li { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    margin: 0px; 
 
} 
 

 
#navbar ul { 
 
    float: right; 
 
}

<div id="navbar"> 
 
    <div id="columnsection"> 
 
    <ul> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
    </ul> 
 
    </div>

Answer 1

代替float:right使用text-align:right

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#navbar { 
 
    margin: auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
#navbar ul li { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    margin: 0px; 
 
} 
 

 
#navbar ul { 
 
    text-align: right; 
 
}

<div id="navbar"> 
 
    <div id="columnsection"> 
 
    <ul> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
    </ul> 
 
    </div> 
 
</div>