如何让邮件签名中的3个按钮等宽且均匀分布

DevOps 小满

2026-7-8

邮件签名按钮布局调整解决方案

问题说明

我用邮件签名生成器制作了签名，原本仅包含1个按钮，现在需要添加另外2个。要求这3个按钮宽度相同，并在签名的整体宽度范围内均匀分布。我已有20年未编写HTML代码，自行调试后无法实现该效果，恳请帮助。

修改后的完整HTML代码

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
  <tbody>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td width="150" style="vertical-align: middle;"><span class="template3__ImageContainer-sc-vj949k-0 jeScQV" style="margin-right: 20px; display: block;"><img src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="max-width: 130px;"></span></td>
              <td style="vertical-align: middle;">
                <h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Aaron</span><span>&nbsp;</span><span>Rajchel</span></h2>
                <p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Owner</span></p>
                <p color="#000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>LandscapAI</span></p>
                <p color="#000" font-size="medium" class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh" style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;"><span>Automation + AI = Grow</span></p>
              </td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td color="#4358a7" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td style="vertical-align: middle;">
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#4358a7" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#4358a7" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="mailto:aaron@landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>aaron@landscap.ai</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#4358a7" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="//www.landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td color="#4358a7" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;"></td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td style="text-align: right; vertical-align: top;"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <!-- 调整后的按钮布局表格 -->
              <td colspan="2">
                <table cellpadding="0" cellspacing="0" style="width: 100%;">
                  <tbody>
                    <tr>
                      <td width="33.33%" style="padding: 0 8px; text-align: center;">
                        <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 100%; box-sizing: border-box;">Customer Demo</a>
                      </td>
                      <td width="33.33%" style="padding: 0 8px; text-align: center;">
                        <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 100%; box-sizing: border-box;">Customer Support</a>
                      </td>
                      <td width="33.33%" style="padding: 0 8px; text-align: center;">
                        <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 100%; box-sizing: border-box;">Affiliate Demo</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

关键修改说明

替换原按钮容器为宽度100%的表格，表格内3个单元格各占33.33%宽度，确保按钮在签名整体宽度内均匀分布。
每个按钮设置display: block和width: 100%，搭配box-sizing: border-box，保证按钮宽度包含边框和内边距，实现三个按钮宽度完全一致。
单元格添加padding: 0 8px，避免按钮间过于拥挤，优化视觉效果。
单元格设置text-align: center，让按钮在单元格内居中显示。

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

如何让邮件签名中的3个按钮等宽且均匀分布

问题说明 #

修改后的完整HTML代码 #

关键修改说明 #

问题说明

修改后的完整HTML代码

关键修改说明