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 and the 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>

如果这就是您想要的解决方案，请告诉我。

干杯

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

HTML for Email - Change position in CSS doesn't Work

html

css

email

html-email