代码之家 › 专栏 › 技术社区 › olegario

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

html-email email css html

olegario · 技术社区 · 8 年前

这是我第一次为电子邮件编写HTML。我看了一些教程来指导我,但我有一个问题,我不知道如何解决它。大体上我所有的代码都在 <table> s、在页面的末尾,页脚也是一个 <表> . 但无论我如何更改位置的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 链接在中间。

1 回复 | 直到 8 年前

Syfer Paul Morgan 8 年前

电子邮件的基本功能是在开始时发送给您。我已经修复了你的代码,所以它应该在所有的电子邮件客户端现在工作。

修复:

添加了社交媒体图标的表格,略带填充
删除位置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>

如果这是你想要的解决方案,请告诉我。

干杯