html导航栏。 Logo 向左，元素向右。元素顺序相反。如何更改顺序？

Question

我想创建一个导航栏。 Logo 应位于左侧，元素应位于右侧。我不知道为什么我的导航栏中的 Items 总是倒序。

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>

float 仍然可以使用，但更像是一种 CSS2 方法。在 CSS3 中，我们有了 flex-box，它有更多的选项，使它更复杂。而且还提供更多灵 active :p 运行以下代码片段以查看 flex 盒解决方案。

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>