设置float:right后桌面端导航栏链接顺序错乱如何修复？

这是float: right的布局特性导致的：右浮动元素会按照DOM的书写顺序依次靠右侧排列，先出现的DOM元素会被放在最右侧，后出现的元素依次排在它左边，最终整体显示顺序和DOM书写顺序完全相反。移动端你设置了float: none，元素按正常文档流排列，所以顺序和DOM结构一致，显示正常。

推荐两种方案，按需选择即可：

方案1：修改DOM顺序（简单快速） #

把导航栏里的链接和下拉菜单的书写顺序整体反转即可，原来的书写顺序是Home -> Work -> Other -> Account，改成Account -> Other -> Work -> Home，不用修改CSS就能得到正确的显示顺序。

方案2：改用Flex布局（更易维护，推荐） #

不用修改现有HTML结构，只需要调整CSS即可，后续新增导航项也不用特意倒序书写：

1. 给.topnav添加flex布局属性，设置整体内容居右
2. 删掉原来给.topnav a和.dropdown设置的float: right属性
   修改后的关键CSS如下：

.topnav {
  background-color: #d4d4d4;
  overflow: hidden;
  /* 新增以下两行 */
  display: flex;
  justify-content: flex-end;
  /* 垂直对齐所有元素，可选 */
  align-items: center;
}
/* 去掉该规则里的float: right */
.topnav a {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* 去掉该规则里的float: right */
.dropdown {
  overflow: hidden;
}

如果需要保留左侧logo显示，只需要给logo对应的p标签加margin-right: auto属性，就能实现logo左对齐、导航整体右对齐的布局，显示顺序也完全符合预期。

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