Html 为什么web浏览器反转了我的菜单选项？

我有一个主菜单，在HTML代码中，它的顺序是正确的，但在浏览器中查看时，它是相反的。为什么?

HTML:

截图：

---

您有浮动的LI：right，以及浮动的向右的#菜单，它将从右向左布局。您可以尝试在它们上使用float:left，也可以尝试在#菜单和LI上不使用float属性。

您有浮动的LI:right，以及浮动的#菜单right，它们将从右向左布局。您可以尝试在它们上使用float:left，也可以尝试在#菜单和LI上不使用float属性。

因为您已经告诉列表元素使用float:right。他们正按照你告诉他们的去做。如果将

li

元素保留为

display:inline

，并删除

float

声明，则它们应按正确的顺序显示，菜单本身仍向右浮动

---

似乎有效（请注意

a

元素的颜色变化，黑色上的蓝色很难阅读）：。

因为您已经告诉列表元素要

浮动：对。他们正按照你告诉他们的去做。如果将
li
元素保留为
display:inline
，并删除
float
声明，则它们应按正确的顺序显示，菜单本身仍向右浮动

似乎有效（请注意
a
元素的颜色变化，黑色上的蓝色很难阅读）：
您正在浮动每个列表项
。这会使每个新列表项显示在以前浮动的项目的左侧。
您正在浮动每个列表项
。这会使每个新列表项显示在先前浮动的项的左侧。
浮动：同一框中的right元素会将稍后添加的元素放置在先前右浮动的元素的左侧。如果您不喜欢Jared的建议，可以按相反的顺序添加它们。
浮动：同一框中的右侧元素将把稍后添加的元素放置在先前右浮动元素的左侧。如果您不喜欢Jared的建议，您可以按相反的顺序添加它们。
当您使用CSS将内容正确浮动时，它们会按照您列出它们的顺序附加到页面右侧

在本例中，“主页”被连接到页面的右侧，然后“服务”被连接到尽可能远的右侧（最终连接到“主页”的左侧）

您要么需要颠倒列表的顺序（因为这是预期的行为），要么可能将整个列表放在一个向右浮动的div中。
当您使用CSS将内容向右浮动时，它们会按照您列出它们的顺序附着到页面的右侧

在本例中，“主页”被连接到页面的右侧，然后“服务”被连接到尽可能远的右侧（最终连接到“主页”的左侧）

您要么需要颠倒列表的顺序（因为这是预期的行为），要么可能将整个列表放在一个向右浮动的div中。
我从LI中删除了float:right，但随后整个菜单浮动到窗口的左侧。是的，我知道，但我以前从未遇到过这个问题。现在一切似乎都是一团糟，我没有做任何不同的事情。（除了向右浮动，我这样做只是为了看看为什么只有菜单一项它不会向右浮动）@Lucifer-如果你能提供一个链接到你的页面，那会有所帮助。因为你用你的代码在页面上浮动所有的LI，我猜你也做错了其他一些事情。顺便说一句，您不应该为任何特定问题（如此）将样式应用于任何元素类型。改用类和CSS选择器（比如
#menu li
可能）。@Lucifer，我为自己的答案准备了一个答案，这似乎与@Jared的答案一致。看看这是不是你想要的。我们都有那些白天（呃，夜晚）。：）我删除了浮动：从李的权利，但随后整个菜单浮动到窗口的左侧。是的，我知道，但我以前从未遇到过这个问题。现在一切似乎都是一团糟，我没有做任何不同的事情。（除了向右浮动，我这样做只是为了看看为什么只有菜单一项它不会向右浮动）@Lucifer-如果你能提供一个链接到你的页面，那会有所帮助。因为你用你的代码在页面上浮动所有的LI，我猜你也做错了其他一些事情。顺便说一句，您不应该为任何特定问题（如此）将样式应用于任何元素类型。改用类和CSS选择器（比如
#menu li
可能）。@Lucifer，我为自己的答案准备了一个答案，这似乎与@Jared的答案一致。看看这是不是你想要的。我们都有那些白天（呃，夜晚）。：）您在哪个浏览器/版本中看到这种行为？我想澄清一下，您希望看到家庭、服务、支持、联系人、我的帐户，但您认为这是正确的吗？您在哪个浏览器/版本中看到这种行为？我只是想澄清一下，你希望看到，家庭，服务，支持，联系，我的账户，但你认为这是正确的吗？
  <div class="header">
    <img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" />
    <ul class="menu">
      <li class="current"><a href="index.php">Home</a></li>
      <li><a href="services.php">Services</a></li>
      <li><a href="support.php">Support</a></li>
      <li><a href="contact.php">Contact Us</a></li>
      <li><a href="myaccount/">My Account</a></li>
    </ul>
  </div>

.header{
  width: 100%;
  height: 30px;

  background-color: #1D242D;
}
.logo{
  padding: 5px 0 0 5px;
  float: left;
  }
.menu{
  float: right:
}
li{
  display: inline;
  list-style: none;
  float: right;
  padding: 5px 5px 7px 5px;

}