如何将页脚导航菜单移动到右侧且不打乱原有排列顺序？

解决方案 #

第一步：删除原有错误CSS

删掉你当前CSS中这段代码里的float: right和width: auto属性：

footer [id*=nav_menu] {
  width: auto; /* 删掉这行 */
  float: right; /* 删掉这行 */
}

第二步：添加flex布局相关CSS

给页脚内层容器设置flex布局，通过左栏的右自动外边距把菜单整体推到右侧，完全不会打乱顺序也不会影响下方元素：

/* 给页脚内层容器开启flex布局 */
.footer_wrap_inner {
  display: flex;
  align-items: flex-start; /* 所有列顶部对齐，避免高度不一致导致错位 */
  width: 100%;
  gap: 24px; /* 可自定义调整列之间的间距 */
}

/* 左侧logo栏设置右自动外边距，将右侧所有菜单推到最右 */
aside#text-4 {
  margin-right: auto;
}

原问题原因说明

• 用float: right会让每个菜单单独右浮动，HTML中排在前面的菜单会先贴到最右侧，后续菜单排在它左边，自然就出现顺序反转的问题；且浮动元素脱离正常文档流，会导致父容器高度塌陷，才会打乱下方支付图标的布局。
• 之前flex-end不生效是因为没有给父容器（也就是.footer_wrap_inner）设置display: flex，flex相关属性只有父元素开启flex布局后才会生效。

可选响应式适配

如果需要移动端适配，可以加媒体查询让小屏幕下页脚列纵向排列：

@media (max-width: 768px) {
  .footer_wrap_inner {
    flex-direction: column;
  }
  aside#text-4 {
    margin-right: 0;
  }
}

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