Question

我使用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>

我的代码出了什么问题？

Answer 1

你应该只漂浮ul权利。列表项应以正确的（预期）顺序左移：

.header ul {
    float:right;
}

// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
    float:left;
}

Answer 2

而不是采取浮动权利，然后将其作为左侧，然后您将得到结果首页旅游定价常见问题

要理解它，让我们看看：

在这里，您正在尝试打印 HOME TOUR PRICING常见问题解答，如果您将其向右浮动，则意味着您要告知从右侧打印，这就是为什么它会将输出显示为 常见问题定价游览，这就是我们使用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>

DEMO

Answer 3

这是因为您要浮动每个列表元素right。

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

.header ul {
  float: right;
}

还有其他各种解决方案，see here

Here's a demo

Answer 4

原因似乎是浮动元素。当您提供float:right时，它会将第一个元素放在最右侧，其余部分放在其后。但是，如果您提供float:left，则项目似乎按正确顺序排列，其中第一项位于左侧，其余项目位于此之后。

Answer 5

尝试这样的事情

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

原因

您将li元素浮动到right，因此float将其移至left。

浮动li父元素，即ul到left。

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

5 个答案:

DEMO

Here's a demo