【问题标题】:How to Remove Underline from HyperLink? [duplicate]如何从超链接中删除下划线? [复制]
【发布时间】:2020-10-30 19:49:31
【问题描述】:

我正在尝试创建一个包含网站链接的电子邮件签名。但是,该链接显示为带下划线。我尝试了许多选项来从网站链接中删除下划线,但都失败了。有什么办法解决这个问题吗?

<html>
  <head>
    <title>Email Signature</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  </head>
  <body>
    <table
      style="
        width: 424px;
        font-size: 10pt;
        font-family: Arial, sans-serif;
        line-height: normal;
      "
      cellpadding="0"
      cellspacing="0"
      border="0"
    >
      <tbody>
        <tr>
          <td
            style="padding-right: 15px; border-right: 1px solid #317a00;"
            width="150"
            style="width: 150px; vertical-align: top;"
            valign="top"
            align="center"
          >
            <a href="{logoURL}" target="_blank"
              ><img
                width="81"
                border="0"
                alt="Logo"
                style="border: 0; max-width: 150px;"
                src="logo.png"
            /></a>
          </td>

          <td
            style="padding-left: 15px; vertical-align: top; font-size: 9pt;"
            valign="top"
          >
            <strong
              style="
                font-size: 10pt;
                font-family: Arial, sans-serif;
                color: #317a00;
              "
              >{firstName} {lastName}</strong
            ><br />
            <span
              style="
                font-size: 10pt;
                font-family: Arial, sans-serif;
                color: #000000;
                padding-bottom: 5px;
              "
              >{title}</span
            ><br />

            <br />

            <span style="font-family: Arial, sans-serif; color: #000000;"
              ><span style="font-weight: bold; color: #317a00;">T: </span
              >{phone}<br
            /></span>
            <span style="font-family: Arial, sans-serif; color: #000000;"
              ><span style="font-weight: bold; color: #317a00;">M: </span
              >{mobile}<br
            /></span>
            <span style="font-family: Arial, sans-serif; color: #000000;"
              ><span style="font-weight: bold; color: #317a00;">E: </span
              >{email}<br
            /></span>

            <br /><span
              ng-if="showField('company')"
              style="
                font-size: 9pt;
                font-family: Arial, sans-serif;
                color: #000000;
              "
              >{company}</span
            >

            <br /><br />
          </td>
        </tr>

        <tr>
          <td align="center" style="border-right: 1px solid #317a00;">
            <a href="{instagramURL}" target="_blank"
              ><img
                alt="Instagram icon"
                border="0"
                width="18"
                height="18"
                style="border: 0; height: 18px; width: 18px;"
                src="it.png" /></a
            >&nbsp;
            <a href="{pinterestURL}" target="_blank"
              ><img
                alt="Pinterest icon"
                border="0"
                width="18"
                height="18"
                style="border: 0; height: 18px; width: 18px;"
                src="pt.png"
            /></a>
          </td>
          <td style="padding-left: 15px;">
            <a href="http://{website}" target="_blank"
              ><span
                style="
                  font-size: 9pt;
                  font-family: Arial, sans-serif;
                  color: #317a00;
                  font-weight: bold;
                "
                >{website}</span
              ></a
            >
          </td>
        </tr>

        <tr>
          <td width="424" style="width: 424px; padding-top: 15px;" colspan="2">
            <a href="{bannerURL}" target="_blank" rel="noopener"
              ><img
                border="0"
                src="banner.png"
                alt="Banner"
                style="max-width: 424px; height: auto; border: 0;"
            /></a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

【问题讨论】:

  • 使用文字:装饰:无;
  • 默认情况下,链接中有一些样式,如果您不想使用您的样式,则可以通过以下方式删除默认样式:text-decoration: none;
  • 可能有一些样式会造成冲突,然后您必须使用 text-decoration: none !important; 我的意思是您将此属性标记为重要,其他样式将被禁用,并且将被应用。

标签: html css


【解决方案1】:

应该这样做:

&lt;a href="http://{website}" style="text-decoration: none;" target="_blank"&gt;&lt;span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold"&gt;{website}&lt;/span&gt;&lt;/a&gt;

更多关于 CSS 样式链接的信息可以在这里找到:https://www.w3schools.com/css/css_link.asp

【讨论】:

  • 这不是答案,因为它是重复的,上面也有评论。
【解决方案2】:

使用Text-decoration: none;,你也可以在css和内联中使用它。

/*a {text-decoration: none;}*/
<html><head><title>Email Signature</title>
<meta content="text/html; charset=utf-8"http-equiv="Content-Type">
</head>
<body>
<table style="width: 424px; font-size: 10pt; font-family: Arial, sans-serif;; line-height:normal;" cellpadding="0" cellspacing="0" border="0">
<tbody>
    <tr>
        <td style="padding-right:15px; border-right:1px solid #317a00;" width="150" style="width:150px; vertical-align: top;" valign="top" align="center">
                <a href="{logoURL}" target="_blank"><img width="81" border="0" alt="Logo" style="border:0;max-width:150px" src="logo.png"></a>
        </td>
        
        <td style="padding-left:15px; vertical-align: top; font-size:9pt" valign="top">
    
            <strong style="font-size:10pt; font-family: Arial, sans-serif;; color: #317a00;;">{firstName} {lastName}</strong><br>
            <span style="font-size:10pt; font-family: Arial, sans-serif;; color: #000000;; padding-bottom:5px;">{title}</span><br>

            <br>
            
            <span  style="font-family: Arial, sans-serif;; color:#000000;;"><span style="font-weight:bold; color:#317a00;; ">T: </span>{phone}<br></span>
            <span  style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">M: </span>{mobile}<br></span>
            <span  style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">E: </span>{email}<br></span>

            <br><span ng-if="showField('company')" style="font-size: 9pt; font-family: Arial, sans-serif;; color: #000000;;">{company}</span>
                
            <br><br>

        </td>
    </tr>
    
    <tr>
        <td align="center" style="border-right:1px solid #317a00;">
                
                <a href="{instagramURL}" target="_blank"><img alt="Instagram icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="it.png"></a>&nbsp;
                <a href="{pinterestURL}" target="_blank"><img alt="Pinterest icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="pt.png"></a>    
        </td>
        <td style="padding-left:15px;">
            <a href="http://{website}" target="_blank" style="text-decoration: none;"><span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span></a>
        </td>       
    </tr>   

    
    <tr>
        <td width="424" style="width:424px;padding-top:15px;" colspan="2">
            <a href="{bannerURL}" target="_blank" rel="noopener"><img border="0" src="banner.png" alt="Banner" style="max-width:424px; height:auto; border:0;"></a>
        </td>
    </tr>
    
</tbody>
</table>

</body>
</html>

【讨论】:

  • 这不是一个答案,因为它是重复的,上面评论为 wel
【解决方案3】:

你试过吗? :text-decoration:none;

【讨论】:

  • 这不是答案,因为它是重复的,上面也有评论。
【解决方案4】:

将样式属性添加到锚标记并将文本装饰添加到无。示例:

style="text-decoration: none"

【讨论】:

  • 这不是答案,因为它是重复的,上面也有评论
【解决方案5】:

试试这个 CSS 样式。

a,a:hover{text-decoration: none;}

【讨论】:

    【解决方案6】:

    将内联 CSS 添加到锚标记

    style="文字装饰:无;

    【讨论】:

      猜你喜欢
      • 2013-09-19
      • 1970-01-01
      • 2013-06-16
      • 1970-01-01
      • 2012-03-06
      • 2015-11-10
      • 2020-06-28
      • 2012-01-16
      • 2021-01-26
      相关资源
      最近更新 更多