问题描述
我正在开发HTML电子邮件，并尝试为左对齐按钮提供左页边距。它适用于其他电子邮件客户端，但不适用于Outlook2016。这是我的代码：
<tr>
<td valign="top" align="left" style="text-align:left;padding:10px 40px 10px 40px">
<!-- CTA Button : BEGIN -->
<center>
<table role="presentation" align="left" cellspacing="0" cellpadding="0" border="0" style="text-align:center">
<tr>
<td style="border-radius:50px;background:#EEB123;text-align:center" class="button-td">
<div class="mktoText" id="splash-cta-button" mktoName="CTA Button">
<a href="#" style="background:#EEB123;border:15px solid #EEB123;font-family:'Roboto',sans-serif;font-size:16px;line-height:20px;text-align:center;text-decoration:none;display:block;border-radius:5px;font-weight:500;text-transform:uppercase" class="button-a" target="_BLANK">
<span style="color:#FFFFFF" class="button-link"> Click Here! </span>
</a>
</div>
</td>
</tr>
</table>
</cente>
<!-- CTA Button : END -->
</td>
</tr>感谢您的帮助。谢谢。
J。
解决方法
即使您尝试使用display:block更改内联元素，Outlook也不会考虑内联元素上的块样式。
因此，您需要在本地块元素（通常为<td>）上放置任何填充。页边距不兼容跨电子邮件，因此请使用填充。
此外，这是电子邮件，因此，为了实现跨电子邮件兼容性，您应该内联样式，而不要使用类（除了要使用@media的手机之外）。
将表格包装到另一个表格中，然后使用<td>插入填充：
<center>
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" style="padding-left:15px">
<table role="presentation" align="left" cellspacing="0" cellpadding="0" border="0" style="text-align:center">
<tr>
<td style="border-radius:50px;background:#EEB123;text-align:center" class="button-td">
<div class="mktoText" id="splash-cta-button" mktoName="CTA Button">
<a href="#" style="background:#EEB123;border:15px solid #EEB123;font-family:'Roboto',sans-serif;font-size:16px;line-height:20px;text-align:center;text-decoration:none;display:block;border-radius:5px;font-weight:500;text-transform:uppercase" class="button-a" target="_BLANK">
<span style="color:#FFFFFF" class="button-link"> Click Here! </span>
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>