移动端Gmail中MJML横向社交图标布局问题求助

问题背景 #

使用MJML创建的社交图标横向布局，在Outlook、桌面邮件客户端及浏览器中显示正常，但在Gmail安卓端及桌面缩小视口时，图标会纵向堆叠。尝试过以下CSS代码但无效：

<mj-style> 
  .social {  
  float: right;
  display: inline-block;
  white-space: nowrap;
  }
</mj-style>

原MJML代码：

<!-- BEGIN HEADER SOCIAL ICONS -->
<mj-section width="600px" height="35px" padding-top="0" padding-bottom="0" padding-left="0" padding-right="0" background-color="#5a90cc">
</mj-section>
<mj-section background-color="#5a90cc" padding-top="0" padding-bottom="0">
  <mj-column width="465px">
    <mj-image css-class="social" width="465px" src="https://mautic.inpowermovement.org/media/images/spacer.png" id="iqwmnb" padding-bottom="5px" title="Spacer" padding-right="0" padding-left="0" padding-top="5px" height="25px"/>
  </mj-column>
  <mj-column width="30px">
    <mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/fb_yl.png" padding-bottom="5px" id="i23thx" alt="Facebook" padding-right="5px" padding-left="0" padding-top="5px" height="25px"/>
      </mj-column>
      <mj-column width="30px">
    <mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/ig_yl.png" padding-bottom="5px" alt="Instagram" id="ih0yev" padding-right="0" padding-left="0" padding-top="5px" height="25px"/>
  </mj-column>
  <mj-column width="30px">
    <mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/yt_yl.png" padding-bottom="5px" alt="YuoTube" id="ik0wpg" padding-right="5px" padding-left="0" padding-top="5px" height="25px"/>
  </mj-column>
  <mj-column width="45px">
    <mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/tg_yl.png" padding-bottom="5px" alt="Telegram" id="i44d84" padding-right="20px" padding-left="0" padding-top="5px" height="25px"/>
  </mj-column>
</mj-section>
<mj-section width="600px" height="35px" padding-top="0" padding-bottom="0" padding-left="0" padding-right="0" background-color="#5a90cc">
</mj-section>
<!-- END HEADER SOCIAL ICONS -->

问题原因 #

1. MJML默认响应式规则：小视口下所有mj-column会自动垂直堆叠，Gmail移动端渲染引擎会触发该行为。
2. 自定义.social类样式无法覆盖MJML生成的内联响应式CSS——邮件客户端对外部样式支持有限，且内联样式优先级更高。
3. 空白图片占位列在小视口下会被单独堆叠，破坏横向布局结构。

解决方案 #

方案1：用mj-group包裹图标列，强制横向排列 #

mj-group是MJML专门用于保持小视口下列横向布局的组件，能避免自动堆叠。同时用mj-spacer替代占位图片更规范。

修改后的MJML代码：

<!-- BEGIN HEADER SOCIAL ICONS -->
<mj-section width="600px" height="35px" padding="0" background-color="#5a90cc"></mj-section>
<mj-section background-color="#5a90cc" padding="0">
  <mj-column width="465px">
    <mj-spacer height="35px" /> <!-- 替代占位图片 -->
  </mj-column>
  <!-- 用mj-group包裹图标列，强制横向排列 -->
  <mj-group width="135px">
    <mj-column width="30px" padding="5px 5px 5px 0">
      <mj-image width="25px" src="https://mautic.inpowermovement.org/media/images/fb_yl.png" alt="Facebook" height="25px"/>
    </mj-column>
    <mj-column width="30px" padding="5px 0">
      <mj-image width="25px" src="https://mautic.inpowermovement.org/media/images/ig_yl.png" alt="Instagram" height="25px"/>
    </mj-column>
    <mj-column width="30px" padding="5px 5px 5px 0">
      <mj-image width="25px" src="https://mautic.inpowermovement.org/media/images/yt_yl.png" alt="YouTube" height="25px"/>
    </mj-column>
    <mj-column width="45px" padding="5px 20px 5px 0">
      <mj-image width="25px" src="https://mautic.inpowermovement.org/media/images/tg_yl.png" alt="Telegram" height="25px"/>
    </mj-column>
  </mj-group>
</mj-section>
<mj-section width="600px" height="35px" padding="0" background-color="#5a90cc"></mj-section>
<!-- END HEADER SOCIAL ICONS -->

方案2：禁用列的响应式行为 #

给每个图标列添加responsive="false"属性，强制列保持横向布局，不受视口大小影响：

<mj-column width="30px" responsive="false" padding="5px 5px 5px 0">
  <mj-image width="25px" src="https://mautic.inpowermovement.org/media/images/fb_yl.png" alt="Facebook" height="25px"/>
</mj-column>

补充CSS优化（针对Gmail） #

若需进一步加固，可添加适配Gmail的内嵌样式（Gmail支持部分内嵌CSS）：

<mj-style>
  @media only screen and (max-width: 600px) {
    .social-group {
      display: flex !important;
      flex-direction: row !important;
      width: auto !important;
    }
  }
</mj-style>

然后给mj-group添加css-class="social-group"即可。

关键说明 #

• 优先使用MJML原生组件（如mj-spacer、mj-group）控制布局，比自定义CSS更适配邮件客户端的渲染差异。
• 邮件客户端对外部样式支持有限，尽量通过组件属性实现布局需求，必要时再辅以内嵌/内联样式。

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