Question

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

Screenshot1

但在某些其他设备或手机上，它会显示如下。

Screenshot2

我的代码在这里

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

地址很容易隐藏，只需在文字之间放置 来伪装它。它是蓝色的原因是因为您的电子邮件客户端通过识别它并为您提供一键式功能来拨打号码，映射地址或访问网站等，从而“帮到您”。

为了防止这种情况，网址有点难，因为你不能只在其中填充 。查看this article了解更多详情。它涵盖的最佳方法是在样式标记中添加类似的内容：

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

并用spans包裹你的网址：

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

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

Answer 2

1：尝试使用元素属性设置表格，而不是使用内联样式，如下所示：

<td width="100pt" style="vertical-align: center; background-color:#00693E; 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>

2。：对主表重复此过程，以强制宽度。

3：还尝试放置图像/其他元素并将其样式设置如下：

<style type="text/css">
  @media only screen and (max-device-width:480px; ) {
    body .header { width:300px}
  }
</style>

<body>
  <img src="http://www.url.com/image.jpg" class="header" width="600px" height="100px" />
</body>

这会强制图像宽度为600px，因为元素样式会覆盖常规样式集。

如何正确格式化地址？

2 个答案: