如何让3个Font Awesome图标横向并排？附现有代码

下面提供两种简单的实现方式，都能让你的三个社交图标横向居中排列：

方法一：Flexbox布局（推荐） #

Flexbox是现代CSS布局方案，代码简洁且易维护，只需给<ul>添加几个样式即可：

<div class="footer">
  <p style="text-align: center;">Social media:</p>
  <ul style="list-style: none; display: flex; justify-content: center; gap: 20px;">
    <li><a href="https://www.youtube.com/channel/UCxEM75DEH_ncOts-JnVpZxg"><i class="fa fa-youtube" style="font-size: 36px;"></i></a></li>
    <li><a href="https://instagram.com/l_justak_l?igshid=ZDdkNTZiNTM="><i class="fa fa-instagram" style="font-size: 36px"></i></a></li>
    <li><a href=""><i class="fa fa-twitter" style="font-size: 36px"></i></a></li>
  </ul>
  <p style="text-align: center;">Copyright &COPY;2023 by </p>
</div>

关键样式说明：

• display: flex：将<ul>的子元素（即<li>）设置为横向排列
• justify-content: center：让图标整体在容器内水平居中
• gap: 20px：控制图标之间的间距，可根据需求调整数值
• 移除了<i>标签上无用的justify-content-center类（该类是Bootstrap的flex对齐类，单独用于行内元素无效）

方法二：Inline-block布局 #

如果需要兼容较老的浏览器，可以使用inline-block方式：

<div class="footer">
  <p style="text-align: center;">Social media:</p>
  <ul style="list-style: none; text-align: center; padding: 0;">
    <li style="display: inline-block; margin: 0 10px;"><a href="https://www.youtube.com/channel/UCxEM75DEH_ncOts-JnVpZxg"><i class="fa fa-youtube" style="font-size: 36px;"></i></a></li>
    <li style="display: inline-block; margin: 0 10px;"><a href="https://instagram.com/l_justak_l?igshid=ZDdkNTZiNTM="><i class="fa fa-instagram" style="font-size: 36px"></i></a></li>
    <li style="display: inline-block; margin: 0 10px;"><a href=""><i class="fa fa-twitter" style="font-size: 36px"></i></a></li>
  </ul>
  <p style="text-align: center;">Copyright &COPY;2023 by </p>
</div>

关键样式说明：

• display: inline-block：让<li>从块级元素变为行内块元素，实现横向排列
• text-align: center：给<ul>设置该样式，让内部的行内块元素居中
• padding: 0：移除<ul>默认的左侧内边距，避免图标偏移
• margin: 0 10px：给每个<li>设置左右间距，控制图标之间的距离

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