如何将页脚（footer）中的链接移至右侧？新手前端求助

AI 小北

2026-6-24

解决页脚元素左右分布的问题

你的核心问题是flex布局与float属性冲突，同时footer的justify-content: center会强制内部元素居中，导致你想要的左右分布效果失效。以下是具体修正方案：

关键修改点

移除.links的float: right，flex布局下float属性不生效
将footer的justify-content: center改为justify-content: space-between，让两个子元素分别靠向容器左右两端
把重复的id="icons"改为class="icons"（HTML中id必须唯一，这是基础规范）

修改后的完整代码

HTML

<footer class="footer">
  <p>
    Any feedback would be much appreciated, you can contact me on the following! 
  </p>
  <div class="links">
    <i class="fa fa-envelope icons"></i>
    <a>Email</a>
    <i class="fa fa-github icons"></i>
    <a>Github</a>
    <i class="fa fa-linkedin icons"></i>
    <a>Linkedin</a>
  </div>
</footer>

CSS

footer {
  background-color: #444;
  padding: 10px;
  display: flex;
  justify-content: space-between; /* 核心修改：实现左右分布 */
  align-items: center; /* 可选：让元素在垂直方向居中对齐 */
}

.icons{
  padding: 5px;
}

.links {
  display: flex; /* 可选：让图标和链接横向排列更紧凑 */
  gap: 15px; /* 可选：给链接组之间添加间距 */
}