如何格式化HTML邮件页脚，使元素横向排列而非纵向？

邮件客户端对CSS的支持非常有限，flex布局在很多主流客户端（比如Outlook）里无法正常渲染，最稳妥的方式是用表格布局来实现横向排列，同时保持所有样式内联。

以下是修改后的代码：

<tr style='background-color: #1F3466;'>
  <td style='background-color: #1F3466;'>
    <footer style='background-color: #18A5A7;'>
      <h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
      <h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São Cristóvão Saúde nas redes sociais: </h3>
      <!-- 用表格实现横向并排 -->
      <table style="border-collapse: collapse; margin-left: 25px; font-family: sans-serif;">
        <tr>
          <!-- Facebook 项 -->
          <td style="vertical-align: middle; padding-right: 30px;">
            <img src='fb_logo.png' style="width:25px; height:25px;" alt='facebook' />
            <a style='text-decoration: none;color: aliceblue;' href='https://m.facebook.com/gruposaocristovaosaude/'>&nbsp;&nbsp;Facebook.com/gruposaocristovaosaude</a>
          </td>
          <!-- Instagram 项 -->
          <td style="vertical-align: middle;">
            <img src='inst_logo.png' style="width:25px; height:25px;" alt='instagram' />
            <a style='text-decoration: none;color: aliceblue;' href='https://instagram.com/saocristovaosaude/'>&nbsp;&nbsp;@saocristovaosaude</a>
          </td>
        </tr>
      </table>
    </footer>
  </td>
</tr>

修改说明： #

• 移除了原来的嵌套footer标签和flex样式，改用<table>+<td>结构实现横向排列，这是邮件开发中兼容性最优的布局方案。
• 通过vertical-align: middle确保图片与文本垂直居中对齐，还原原设计的视觉效果。
• 用padding-right控制两个社交账号项的间距，替代原代码中的    ，更易维护。
• 保留了原有的颜色、字体、图片尺寸等所有样式，保证视觉一致性。

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