为什么网络浏览器会改变我的菜单选项？

Question

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

HTML：

  <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>

CSS：

.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;

}

截图：

Answer 1

你有LI的浮动：右边，以及#menu浮动右边，它将从右到左布局。您可以尝试浮动：左侧，也可以尝试在#menu和LI上没有float属性。

Answer 2

当您使用CSS向右移动时，它们会按照您列出的顺序附加到页面右侧。

在这种情况下，“Home”会附加到页面的右侧，然后“服务”会尽可能地附加在右侧（最终位于“Home”的左侧）。

您需要反转列表的顺序（因为这是预期的行为），或者可能将整个列表放在一个浮动的单个div中。

Answer 3

因为您已将列表元素告诉float: right。他们正在做你告诉他们的事情。如果您将li元素保留为display: inline并删除float声明，则它们应按正确的顺序显示，菜单本身仍然会向右浮动。

似乎工作（请注意a元素的颜色变化，蓝色 - 黑色是尝试和阅读的痛苦）：JS Fiddle。

Answer 4

您正在浮动每个列表项<li>。这会导致每个新列表项显示在先前浮动项的左侧。

Answer 5

float：在同一个box元素内，将稍后添加的元素添加到先前右浮动元素的左侧。如果您不喜欢Jared的建议，可以按相反的顺序添加它们。