Html 为什么菜单创建时ul li元素以相反顺序显示？

我使用

ul

和

li

创建了一个菜单，但它以相反的顺序显示我。例如：

常见问题解答-家庭旅游定价常见问题解答而不是预期的家庭旅游定价常见问题解答

.header ul {

}
.header li {
   list-style-type: none;
   margin-left: 40px;
   float: right;
}

<div class="header">
   <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">TOUR</a></li>
      <li><a href="">PRICING</a></li>
      <li><a href="">FAQ</a></li>
   </ul>
</div>

.ul头{
}
李局长{
列表样式类型：无；
左边距：40px；
浮动：对；
}

---

我的代码有什么问题？

您应该只浮动

ul

正确的值。列表项应按正确（预期）的顺序向左浮动：

---

不要向右移动浮动，而是向左移动浮动，这样您将得到结果家庭旅游定价常见问题解答

要理解它，让我们看看：

在这里，您试图打印家庭旅游定价常见问题解答，如果您将此浮动到右侧，则表示您告诉您从右侧打印，这就是为什么它会将输出作为 常见问题解答定价之旅回家这就是为什么我们使用

float:left

.header ul

{


}
.header li
{
    list-style-type: none;
    margin-left: 40px;
    float: left;

}

 <div class="header">
         <ul>
            <li><a  href="">HOME</a></li>
                <li><a href="">TOUR</a></li>
                 <li><a  href="">PRICING</a></li>
                <li><a  href="">FAQ</a></li>

            </ul>
  </div>

.ul头
{
}
李局长
{
列表样式类型：无；
左边距：40px；
浮动：左；
}







原因似乎是浮动因素。当您给出
float:right
时，它会将第一个元素带到最右侧，然后将其余的项带到最右侧。但是，如果您将
float:left
，则项目的顺序似乎是正确的，第一个项目位于左侧，其余项目位于左侧。
这是因为您将每个列表元素
向右浮动

改为在父元素上设置
float:right

.header ul {
  float: right;
}

还有其他各种解决方案

试试这样的

    .header ul {
        float: right;
    }
    .header li {
        list-style-type: none;
        margin-left: 40px;
        float: left;
    }

理由

您将
li
元素浮动到
右侧
，因此将
浮动到
左侧

浮动
li
父元素ie
ul
到
左
这是因为你将它们浮动到
右
@billyonecan可能会给出一个答案。
    .header ul {
        float: right;
    }
    .header li {
        list-style-type: none;
        margin-left: 40px;
        float: left;
    }