解决Footer中链接无法Inline（横向）排列的问题

问题根源 #

Navbar的CSS选择器过于宽泛（比如直接全局设置a或li为块级显示），导致Footer内的链接继承了这些样式，无法横向排列。

具体修复方法 #

1. 给Footer链接容器添加专属类 #

修改HTML，给Footer里的链接外层容器加上独特类名，比如footer-nav：

<footer>
  <div class="footer-nav">
    <a href="/about">关于我们</a> | 
    <a href="/contact">联系我们</a> | 
    <a href="/privacy">隐私政策</a>
  </div>
</footer>

2. 编写精准的CSS覆盖样式 #

添加以下CSS，强制Footer内的元素横向排列，同时抵消Navbar的干扰：

/* 让Footer链接容器使用弹性布局实现横向排列 */
.footer-nav {
  display: flex;
  align-items: center;
  gap: 12px; /* 用间距替代|分隔符更美观，也可以保留| */
}

/* 重置Footer内链接的样式，覆盖Navbar的全局设置 */
.footer-nav a {
  display: inline-block;
  margin: 0;
  padding: 0;
  /* 可根据需求添加颜色、字体等样式 */
  color: #333;
  text-decoration: none;
}

/* 如果保留|分隔符，调整其样式 */
.footer-nav .sep {
  color: #999;
}

如果用gap替代手动写的|，可以直接删掉HTML里的|，布局更灵活。

3. 优化Navbar的CSS选择器 #

检查Navbar的样式代码，避免使用全局选择器影响其他元素，比如把：

/* 错误写法：影响所有a标签 */
a {
  display: block;
  padding: 10px;
}

修改为：

/* 正确写法：仅作用于Navbar内的链接 */
.navbar a {
  display: block;
  padding: 10px;
}

应急方案（快速修复） #

如果暂时不想调整Navbar代码，可临时用!important强制覆盖样式（不推荐长期使用）：

footer a {
  display: inline !important;
  margin: 0 !important;
}

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