HTML 导航栏.徽标向左，项目向右.项目顺序颠倒.如何更改顺序?

Question

我想创建一个导航栏。徽标应向左，项目应向右。我不知道为什么项目总是在我的导航栏中保持相反的顺序。

ul {
margin: 0;
padding: 0;
list-style: none;           /* remove the markers/bullets */
display: block;              /* Displays an element as a block-level flex 
container */
}
/* Each item in the navigation bar */
li {
line-height: 65px;          /* The height of the each iterm is 65px */
font-size: 20px;            /* Font size is 14 px */
background-color: green;
width: 200px;
text-align: center;
float: right;
}
li:first-child{
float:left;
margin-left: 200px;
}

<header>
<ul>
<li class="logo"><a href="#">LOVE</a></li>
<li class="direction-item"><a href="">item1</a></li>
<li class="direction-item"><a href="">item2</a></li>
<li class="direction-item"><a href="">item3</a></li>
<li class="direction-item"><a href="">item4</a></li>
<li class="direction-item"><a href="">item4</a></li>
</ul>
</header>

Answer 1

这是浮点数导致其他项目以相反的顺序显示。

ul {
margin: 0;
padding: 0;
list-style: none;           /* remove the markers/bullets */
display: block;              /* Displays an element as a block-level flex 
container */
}
/* Each item in the navigation bar */
li {
font-size: 20px;            /* Font size is 14 px */
background-color: skyblue;
padding: 10px;
text-align: center;
float: right;
}
li:first-child{
float:left;
}

<header>
<ul>
<li class="logo"><a href="#">LOVE</a></li>
<li class="direction-item"><a href="">item1</a></li>
<li class="direction-item"><a href="">item2</a></li>
<li class="direction-item"><a href="">item3</a></li>
<li class="direction-item"><a href="">item4</a></li>
<li class="direction-item"><a href="">item5</a></li>
</ul>
</header>

浮点数仍然可以使用，但更多的是 CSS2 方法。使用CSS3，我们有flex-box，它有更多的选择，使其更加复杂。但也提供了更大的灵活性:p运行以下代码片段以查看弹性框解决方案。

ul {
display: flex;
list-style: none;
}
li {
flex: 1 1 auto;
text-align: right;
}
li.logo {
text-align: left;
}

<header>
<ul>
<li class="logo"><a href="#">LOVE</a></li>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>
</header>