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，它具有更多选项，使其更加复杂。而且还提供了更多的 flexibility ：：p运行以下代码片段以查看flex-box解决方案。

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>