CSS设置横向导航栏部分<li>右浮导致顺序反转的解决方法

问题背景 #

我正在创建一个固定在页面顶部的基础横向导航栏，包含4个链接，希望最后两个链接通过CSS显示在导航栏右侧，但使用float:right会导致这两个<li>元素顺序反转。我不想修改HTML中这两个<li>的顺序，因为屏幕阅读器会按反转后的顺序读取。

现有代码如下：

原CSS代码 #

* {box-sizing: border-box;
   padding: 0;
   margin: 0;}

body {font-family: Helvetica, Arial, sans-serif;
      color: #393939;}

header {font-size: 18px;}

ul.topnav {list-style-type: none;
           margin:0;
           padding-left: 300px;
           padding-right: 300px;
           overflow: hidden;
           background-color: rgba(50, 150, 220, 1);
           position: fixed;
           top: 0;
           width: 100%;}

ul.topnav li {float: left;}

ul.topnav li.right {float: right;}

ul.topnav li a   {display: block;
                  color: white;
                  text-align: center;
                  padding: 14px 16px;
                  text-decoration: none;}

ul.topnav li a:hover {background-color: rgb(200, 200, 200);}

ul.topnav li a.activetab {background-color: rgb(200, 200, 200);}

@media screen and (max-width: 600px) {ul.topnav li.right, 
                                      ul.topnav li {float: none;}}

main {margin-top: 50px;
      height: 1500px;
      text-align: center;
      line-height: 2;}

原HTML代码 #

<body>  
    <header>
      <nav>
        <ul class="topnav">
          <li><a class="activetab" href="home">Home</a></li>
          <li><a href="dashboard">Explore</a></li>
          <li class="right"><a href="signup">Login</a></li>
          <li class="right"><a href="login">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Homepage Test</h1>
      <h2>Warning: work in progress</h2>
      <h3>Notice how the navigation bar stays at the top of the page while scrolling</h3>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
      <p>This is a test, nothing to see here...</p>
    </main>
</body>

最优解决方案：Flexbox布局 #

使用Flexbox可以完美解决浮动导致的顺序反转问题，同时保持HTML结构的语义化（适配屏幕阅读器），是当前处理这类导航布局的首选方案。

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  color: #393939;
}

header {
  font-size: 18px;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0 300px;
  background-color: rgba(50, 150, 220, 1);
  position: fixed;
  top: 0;
  width: 100%;
  /* 启用Flex布局 */
  display: flex;
  /* 垂直居中链接 */
  align-items: center;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 合并hover和active样式，简化代码 */
ul.topnav li a:hover,
ul.topnav li a.activetab {
  background-color: rgb(200, 200, 200);
}

/* 关键：将第一个右对齐的li及其右侧元素推到容器最右侧 */
ul.topnav li.right:first-of-type {
  margin-left: auto;
}

/* 响应式调整 */
@media screen and (max-width: 600px) {
  ul.topnav {
    /* 切换为垂直排列 */
    flex-direction: column;
    padding: 0;
  }
  /* 取消自动margin，恢复垂直排列的正常顺序 */
  ul.topnav li.right:first-of-type {
    margin-left: 0;
  }
}

main {
  margin-top: 50px;
  height: 1500px;
  text-align: center;
  line-height: 2;
}

核心原理说明 #

1. Flex布局替代浮动：移除原有的float相关样式，给ul.topnav设置display: flex，Flex布局天生支持灵活的元素排列，无需处理浮动带来的各种问题。
2. margin-left: auto实现右对齐：给第一个需要右对齐的<li>（即Login所在的元素）添加margin-left: auto，这个属性会自动填充该元素左侧的剩余空间，将它和右侧的Contact元素一起推到导航栏最右侧，同时完全保留HTML中的原始顺序，不会影响屏幕阅读器的读取逻辑。
3. 简洁的响应式适配：在小屏幕下只需将Flex方向改为column，取消自动margin即可实现垂直排列，比浮动布局的响应式调整更直观。

HTML代码无需修改 #

原HTML结构保持不变，完全不需要调整<li>的顺序，既满足视觉布局需求，又保证了无障碍访问的兼容性。

内容的提问来源于stack exchange，提问作者user21009877