电子邮件的HTML - 改变CSS中的位置并不起作用

Question

这是我第一次编写电子邮件HTML代码。我看了一些教程来指导我，但我遇到了一个问题，我不知道如何解决它。基本上。我的所有代码都在<table>之内。在页面的末尾，页脚也是<table>。但是如何更改位置的CSS值并不重要，结果总是在电子邮件中：

问题在于此代码：

<tr>
  <table id="footer" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fe3a35; opacity: 0.9">
    <tr>
      <td valign="top" align="center">
        <p style="font-family: 'Arial'; font-size: 16px; font-weight: 300; text-align: center; position: relative; left: -163px; top: 35px; line-height: 2px; color: white;">&reg; Someone, somewhere 2013</p>
        <p style="font-family: 'Arial'; text-align: center; font-weight: 300;position: relative; left: -132px; top: 25px;ine-height: 2px; color: white;"><a href="" style="font-family: 'Arial'; color: white;">Unsubscribe</a> to this newsletter instantly</p>
        <a href="https://twitter.com/realdonaldtrump" target="_blank" style="position: relative; left: 220px; top: -25px;"><img src="https://i.imgur.com/bgssIwP.png" width="30"></a>
        <a href="https://www.facebook.com/gustavo.olegario" target="_blank" style="position: relative; left: 220px; top: -25px;"><img src="https://i.imgur.com/JQ19LU9.png" width="30"></a>
      </td>
    </tr>
  </table>
</tr>

事实上，我想做的是将字母逼近中间的twitter和facebook链接。

Answer 1

电子邮件的基础知识就像您开始时一样对您而言。我已修复您的代码，因此它现在可以在所有电子邮件客户端上运行。

修复：

• 为您的社交媒体图标添加了带有轻微填充的表格
• 删除了位置CSS
• 图片应该有显示块

<table id="footer" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fe3a35; opacity: 0.9">
    <tr>
      <td valign="top" align="center"style="font-family: 'Arial'; font-size: 16px; font-weight: 300; text-align: center;color: white;padding:10px 0px;">&reg; Someone, somewhere 2013</td>
    </tr>
    <tr>
      <td valign="top" align="center" style="font-family: 'Arial'; text-align: center; font-weight: 300; color: white;padding:5px 0px 10px 0px;"><a href="" style="font-family: 'Arial'; color: white;">Unsubscribe</a> to this newsletter instantly</td>
    </tr>
    <tr>
      <td valign="top" align="center">
		
  <table border="0" align="center" cellspacing="0" cellpadding="0">      
  <tbody>
    <tr>
      <td style="padding-right:5px;"><a href="https://twitter.com/realdonaldtrump" target="_blank" style=""><img src="https://i.imgur.com/bgssIwP.png" width="30" style="display:block;"></a></td>
      <td style="padding-left:5px;"><a href="https://www.facebook.com/gustavo.olegario" target="_blank" style=""><img src="https://i.imgur.com/JQ19LU9.png" width="30" style="display:block;"></a>
		</td>
    </tr>
  </tbody>
</table>

请告诉我这是否是您所追求的解决方案。

干杯