如何在 HTML 邮件中实现两按钮并排且等宽撑满容器-html教程-PHP中文网

如何在 HTML 邮件中实现两按钮并排且等宽撑满容器

本文详解如何在兼容性严苛的 html 邮件环境中，使用语义清晰、客户端友好的表格布局，让两个按钮水平并排、均匀占据父容器宽度，并在移动端自动堆叠为全宽单列。

本文详解如何在兼容性严苛的 html 邮件环境中，使用语义清晰、客户端友好的表格布局，让两个按钮水平并排、均匀占据父容器宽度，并在移动端自动堆叠为全宽单列。

在 HTML 邮件开发中，“Flexbox”或“CSS Grid”几乎不可用——Outlook（尤其是 Windows 版）、Gmail App、Apple Mail 等主流客户端对现代 CSS 支持极弱，甚至完全忽略 display: flex。因此，可靠的跨客户端方案必须回归表格布局（table-based layout），这是邮件开发的黄金准则。

✅ 正确做法：双表格 + 百分比宽度 + 响应式断点

核心思路是：

用两个分别包裹按钮，设置 width="49%" 并分别 align="left" 和 align="right"；

保留 2% 的间隙（而非 50%+50%），避免 Outlook 等客户端因四舍五入或渲染误差导致换行；

通过媒体查询为小屏设备（如手机）重置 .button 表格宽度为 100% !important，强制堆叠；

所有按钮内容用标签嵌套在

中，display: block 确保点击区域完整。

以下是精简、可直接复用的生产级代码片段（已适配你原有结构）：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<!-- 两按钮并排区域（替换你原代码中 SECTION 2 的整个 <tr>） -->
<tr>
<td style="padding: 10px 20px 20px 20px; font-size: 0;" bgcolor="#E3F7FE">
    <!-- 左侧按钮表格 -->
    <table class="button" border="0" cellspacing="0" cellpadding="0" width="49%" align="left" role="presentation" style="vertical-align: top;"><tr>
<td align="center" valign="middle" bgcolor="#FEC833" height="44" style="border-radius: 5px;">
          <a href="#" target="_blank" style="display: block; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; color: #060B13; line-height: 44px;">
              ДЕТЕКТИВЫ  
          </a>
        </td>
      </tr></table>
<!-- 右侧按钮表格 --><table class="button" border="0" cellspacing="0" cellpadding="0" width="49%" align="right" role="presentation" style="vertical-align: top;"><tr>
<td align="center" valign="middle" bgcolor="#FEC833" height="44" style="border-radius: 5px;">
          <a href="#" target="_blank" style="display: block; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; color: #060B13; line-height: 44px;">
            ЗАРУБЕЖНАЯ ЛИТЕРАТУРА
          </a>
        </td>
      </tr></table>
</td>
</tr>

并在

的