导航条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>