小屏幕下页脚无法保持行排列及大屏幕拓展页脚链接求助

问题根因 #

• 所有footer相关的flex布局规则都写在min-width: 768px的媒体查询内，屏幕宽度小于768px时不会触发该段样式，.footer-list默认是普通块级列表，子li元素会垂直排列，就出现了你看到的列布局问题。
• 大屏展示更多链接的需求可以通过对额外链接做响应式显隐控制实现。

修复方案 #

1. 小屏footer导航横向排列适配 #

在全局CSS（所有媒体查询外部）添加以下规则：

.footer-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 可根据需要加gap控制按钮间距，比如gap: 20px */
}

原有min-width: 768px媒体查询内的footer相关flex规则不需要删除，不会和新增样式冲突。

2. 大屏展示更多页脚链接 #

首先修改页脚部分的HTML代码，添加你需要展示的额外链接，给这些额外链接加统一类名extra-footer-link：

<ul class="footer-list">
  <li class="footer-nav"><a href="#">Cole Smith</a></li>
  <!-- 新增的额外链接示例 -->
  <li class="footer-nav extra-footer-link"><a href="index.html">首页</a></li>
  <li class="footer-nav extra-footer-link"><a href="#portfolio">作品</a></li>
  <li class="footer-nav extra-footer-link"><a href="#contact">联系</a></li>
  <li class="footer-nav"><a href="#">返回顶部</a></li>
</ul>

然后在全局CSS添加额外链接默认隐藏的规则：

.extra-footer-link {
  display: none;
}

最后在min-width: 768px的媒体查询内添加额外链接显示的规则：

.extra-footer-link {
  display: list-item;
}

最终效果 #

• 屏幕宽度小于768px时，页脚导航仅展示名称和返回顶部按钮，横向排列
• 屏幕宽度大于等于768px时，自动展示所有新增的额外页脚链接

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