HTML导航栏如何将class为account的最后一个菜单项对齐到右侧

问题根源 #

你设置的float:right和margin-left:auto不生效的核心原因是，现有代码中.account类已经配置了position: absolute; right: 0属性，绝对定位会让元素脱离正常的flex布局流，常规的margin、float属性对脱离文档流的元素不会产生预期效果。此外你当前的菜单项顺序也不符合靠右布局的要求。

修复方案 #

1. 调整CSS规则

首先删除原有.account类中的position: absolute; right: 0属性，替换为margin-left: auto；为了避免移动端菜单布局错乱，需要在max-width:1000px的媒体查询中重置account的左外边距：

/* 替换原有.account的CSS规则 */
.account {
    margin-left: auto;
}

/* 在@media (max-width: 1000px) 代码块中新增以下规则 */
.account {
    margin-left: 0;
}

2. 调整HTML菜单项顺序

将带有account类的li元素挪到.menu容器的最后一位，放在services菜单项之后，这样flex容器的自动外边距才能正常生效：

<div class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/">Explore</a></li>
  <li><a href="/">Info</a></li>
  <li class="services">
    <a href="/">Services</a>
    <ul class="dropdown">
      <li><a href="/">Dropdown 1 </a></li>
      <li><a href="/">Dropdown 2</a></li>
      <li><a href="/">Dropdown 2</a></li>
      <li><a href="/">Dropdown 3</a></li>
      <li><a href="/">Dropdown 4</a></li>
    </ul>
  </li>
  <!-- account移到最后 -->
  <li class="account" id="login"><a href="/login">Login</a></li>
</div>

修改完成后，桌面端导航栏的account项会自动对齐到最右侧，移动端汉堡菜单展开后也能保持正常的列表排列效果。

内容的提问来源于stack exchange，提问作者A. Vreeswijk