Question

这是适用于网络浏览器，Apple邮件，ios邮件的电子邮件代码，但在使用Outlook时，这些元素不会显示内联块。知道为什么以及如何解决这个问题？我希望按钮和图像保持并排而不是堆叠。谢谢！

<table style="display:inline-block; margin-top:20px; margin-left:20px; margin-bottom:20px;" width="150px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Read More</a></td>
    </tr>
  </table>
  </td>
</tr>
</table>


<table style="display:inline-block; margin-bottom:27px;" width="150" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>

     <a  href="https://www.facebook.com" target="_blank"><img alt="Facebook" style="margin-right:10px; vertical-align: middle;" src="http://media.com/FB-02.png"></a>  
     <a href="https://twitter.com" target="_blank"><img alt="Twitter" style="margin-right:10px; vertical-align: middle;" src="http://media.com/twitter-03.png"></a>

     </td>
   </tr>
</table>

Answer 1

Outlook对css框模型没有很好的支持，因此display: inline-block;和margin之类的内容并不像在网络上那样工作。

将父<tables>中的两个<table>包裹在每个主要电子邮件客户端中并排显示每列：

<table cellspacing="0" cellpadding="0" border="0" role="presentation">
  <tr>
    <td width="150" style="padding: 20px 0 20px 20px;">

      <!-- your first table : BEGIN -->
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Read More</a></td>
        </tr>
      </table>
      <!-- your first table : END -->

    </td>
    <td width="150" style="padding-bottom:27px;">

      <!-- your second table : BEGIN -->
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="https://www.facebook.com" target="_blank"><img alt="Facebook" style="margin-right:10px; vertical-align: middle;" src="http://media.com/FB-02.png"></a>  
            <a href="https://twitter.com" target="_blank"><img alt="Twitter" style="margin-right:10px; vertical-align: middle;" src="http://media.com/twitter-03.png"></a>
          </td>
        </tr>
      </table>
      <!-- your second table : END -->

    </td>
  </tr>
</table>

Outlook不允许表显示内联块

1 个答案: