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

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

html-email anchor css html
  •  0
  • Adam ZBWR  · 技术社区  · 8 年前

    如何在定位标记旁边设置图像(右边的小箭头) <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 回复  |  直到 8 年前
        1
  •  2
  •   FlexOrNoFlex    8 年前

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

    希望能有所帮助。 

    <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>
        2
  •  1
  •   Syfer Paul Morgan    8 年前

    不确定您是否考虑过这个问题,但它应该和添加 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>

    希望这个答案对你有用。

        3
  •  1
  •   gwally    8 年前

    编辑

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

    <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添加一个间隔表。

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

        4
  •  0
  •   IP_    8 年前

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

    a {
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
}
    <a href="">Link <span> &#x276F;</span></a>
        5
  •  -1
  •   Keith    8 年前

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

    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>
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号