代码之家 › 专栏 › 技术社区 › Adam ZBWR

如何在HTML电子邮件中的锚标记旁边添加图标?

html-email anchor css html

Adam ZBWR · 技术社区 · 7 年前

如何在定位标记旁边设置图像(右边的小箭头) <a> 保持它们垂直和水平对齐。我尝试过很多种方法,但每次尝试都会遇到错误。或者 <A & GT; 标签在中不起作用(不可单击) html 电子邮件或箭头将在可点击区域之外。我只需要以下代码中的一个。下面是我的一些尝试:

第一个代码: 这里的问题是:如果用户单击箭头,它不会响应,因为它不在 <A & GT; 标签,但这起作用了

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
            <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
          </td>
          <td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
          <td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

第二个代码: 我无法使文本在 <td>

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: 100% !important;">
            <a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

第三代码 这里的问题是:它在任何电子邮件客户端中都不起作用,并且链接不可点击。

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
        <tr>
          <td>
            <a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
              <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
                <tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
                  <td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
                    GET VERSATILE
                  </td>
                  <td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

总结:

我需要这个 <A & GT; 标签旁边有一个箭头,在蓝色区域周围可以点击。

谢谢你的帮助。

5 回复 | 直到 7 年前

FlexOrNoFlex 7 年前

这在大多数电子邮件客户机中都有效,即使我更改了锚标记内的文本。

希望能有所帮助。

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
        <tr>
          <td class="links" style="padding: 10px; color: #ffffff; vertical-align: middle; text-align: center; font-family: Arial, Helvetica, sans-serif;font-weight: bold;"><a style="text-align: center; display: block;cursor: pointer;font-family: Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: bold;" pm-link="landingpage1" pm-link-default-url="global_landingpage">GO TO LINK<img src="http://via.placeholder.com/15/007cb0" width="15" alt="" /><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;padding: 0 0 4px 0;max-width: 20px" /></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Syfer Paul Morgan 7 年前

不确定您是否考虑过这个问题,但它应该和添加 a 标记第一个问题的图像。

试试下面的这个,看看它是否适合你。我刚从兄弟TD添加了一个标签,只是想给你一个主意。

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
            <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
          </td>
          <td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
          <td><a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;"><img src="http://via.placeholder.com/5/007cb0" width="5" /></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

希望这个答案对你有用。

gwally 7 年前

编辑

现在我知道你在做一个向右对齐的按钮,我有一个更好的方法。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
  <tr>
    <td><!-- The button code --> 
    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td style="background: #007cb0; text-align: center;">
              <a href="#" target="_blank" style="background: #007cb0; 
              border: 15px solid #007cb0; font-family: sans-serif; font-size: 16px; 
              line-height: 110%; text-align: center; text-decoration: none !important; 
              display: block; font-weight: 700;"><span style="color:#ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;Go to Link&nbsp;<img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
              &nbsp;&nbsp;&nbsp;</span></a>
            </td>
        </tr>
    </table>
    </td>
  </tr>
</table>

此代码将正确对齐并在每个电子邮件客户端中显示。从外观上看不太完美。为此,需要专门为Outlook添加一个间隔表。

我正在删除旧的帖子和代码,但老实说,这是我昨天发布的添加内容   这给了你一个可靠的填充形式。

IP_ 7 年前

你能告诉我为什么要用表格格式制作按钮式链接吗?这是针对HTML电子邮件的吗?这似乎更容易,在一些定制之后,将提供相同的外观:

a {
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
}

<a href="">Link <span> &#x276F;</span></a>

-1

Keith 7 年前

好的,然后只需添加/调整边距和填充,使可单击区域变大。

a{
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 1em;
  margin: -1em;
}

td img{
  padding-bottom: 5px;
}

https://jsfiddle.net/33q09cy0/

并将图像添加到标记引用中。

<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
        <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
        <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</td>