html - 如何使我的地址格式正确？

Question

我正在尝试将地址放入 html 表格中作为电子邮件地址。我想确保我的地址显示如下

但在其他一些设备或手机上，它会这样显示。

我的代码在这里

<td style="vertical-align: center; background-color:#00693E; width: 100pt; text-align: left; font-size:8;">
        <div style="color:white;">
            Some Name for a Group
            <br>
            1234 Random St
            <br>
            San Francisco, CA 94107
            <br>
            website.com
        </div>
    </td>

我不知道如何将地址保持在行的右侧而不是使文本右对齐。我现在将它保存在一个单元格中，它是右边倒数第二个单元格。

Answer 1

这是 html 电子邮件中的常见问题。首先，您的代码应该在 100% 的表格中进行布局。我添加了一个包装表来演示如何将其右对齐但文本左对齐。这是成品:

<style>
  .appleLinks a {color: #ffffff !important; text-decoration: none;}
</style>

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right">
      <table width="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="middle" bgcolor="#00693E" style="font-size:8px; color:#FFFFFF;">
            Some Name for a Group
            <br>
            1234&nbsp;Random&nbsp;St
            <br>
            San&nbsp;Francisco,&nbsp;CA&nbsp;94107
            <br>
            <a href="website.com" style="color: #FFFFFE; text-decoration: none;"><span class="appleLinks">website.com</span></a>
          </td>
        </tr>
      </table>      
    </td>
  </tr>
</table>

地址很容易隐藏，只需要在单词之间加上 就可以掩饰它。它是蓝色的原因是因为您的电子邮件客户端通过识别它并为您提供一键式功能来调用号码、映射地址或访问网站等，从而“帮了您一个忙”。

为了防止这种情况，url 有点难，因为您不能只在其中填充  。查看this article更多细节。它涵盖的最佳方法是将类似这样的内容添加到您的样式标签中:

.appleLinks a {color: #ffffff !important; text-decoration: none;} 

并用 span 包裹你的 url:

<a href="website.com" style="color: #FFFFFE; text-decoration: none;"><span class="appleLinks">website.com</span></a>

我冒昧地将 href 添加到您的网址。你会注意到我使用了#FFFFFE，它几乎是白色的。这是因为 Gmail 会忽略纯白色和黑色(分别为#FFFFFF 和#000000)并默认使用标准蓝色链接(我们不需要)。