如何从 HTML 中的链接中删除下划线？答案

【问题标题】：How to remove underline from a link in HTML?如何从 HTML 中的链接中删除下划线？
【发布时间】：2012-06-06 21:46:41
【问题描述】：

在我的页面中，我放置了一些我不想要任何行的链接，那么，如何使用 HTML 将其删除？

【问题讨论】：

Paic，我不会再费心回滚标签了，但你知道，删除下划线的唯一方法是使用 CSS。是的，即使您将它添加到 HTML 中（在 style 属性中），它仍然是 CSS。其他两个标签也完全有效（presentation 和hyperlink）。今后，除非有正当理由，否则请不要删除（或添加）问题的标签。谢谢！
@bfrohs 我尊重你的话，但我只使用 HTML 构建我的网站，所以我没有添加更多标签，因为如果我这样做，我可能会得到不同语言的答案。其实我对它有点新手，这就是原因。
你不能在没有 CSS 的情况下构建一个符合标准的网站（除非你使用浏览器默认的所有演示文稿）。 HTML = 结构； CSS = 演示文稿。其他标签与不同的语言无关——它们只是用来帮助人们找到问题和答案。
How to remove the underline for anchors(links)?的可能重复
为什么这个问题有这么多赞成票？您可以在一次 Google 搜索中逐字回答它，而且我敢肯定 StackOverflow 上有很多重复。

标签： html

【解决方案1】：

Inline版本：

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

但是请记住，您的should 通常是separate 您网站的内容（即HTML），来自演示文稿（即CSS）。因此你一般应该avoid inline styles。

请参阅 John's answer 以查看使用 CSS 的等效答案。

【讨论】：

杀手！在我做 html 的这些年里，我从未见过这些下划线...... ^^
约翰的回答基本上仍然使用内联样式。分离你的 CSS 不仅仅意味着在你的 html 中使用别名。例如class="big-and-red" 是别名而不是分隔。 class="meaningful-domain-item" 然后 css .meaningful-domain-item { //big and red } 是。这个答案足以提醒我在我的 css +1 中使用哪个标签。
上述代码对我不起作用。当我深入研究这个问题时，我意识到它不起作用，因为我将样式放在了 href 之后。当我将样式放在 href 之前时，它按预期工作。 yoursite.com" style="text-decoration:none">你的网站

【解决方案2】：

这将删除所有链接中的所有下划线：

a {text-decoration: none; }

如果您有特定的链接要应用此链接，请给它们一个类名，例如 nounderline，然后执行以下操作：

a.nounderline {text-decoration: none; }

这将仅适用于那些链接，而不影响所有其他链接。

此代码属于您文档的<head> 或样式表中：

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

在体内：

<a href="#" class="nounderline">Link</a>

【讨论】：

【解决方案3】：

如果鼠标指针位于锚点上方，我建议使用 :hover 来避免下划线

a:hover {
   text-decoration:none;
}

【讨论】：

【解决方案4】：

或将其添加到您的 HTML 文档的 <head>：

<style type="text/css">
 a {text-decoration:none;}
</style>

或者将其添加到a 元素本身（不推荐）：

<!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

【讨论】：

【解决方案5】：

其他答案都提到了文字装饰。有时您使用 Wordpress 主题或其他人的 CSS，其中链接由其他方法加下划线，因此 text-decoration: none 不会关闭下划线。

Border 和 box-shadow 是我知道的另外两种为链接添加下划线的方法。要关闭这些：

border: none;

和

box-shadow: none;

【讨论】：

【解决方案6】：

以下不是最佳做法，但有时可以证明是有用的

最好使用 John Conde 提供的解决方案，但有时，使用外部 CSS 是不可能的。因此，您可以将以下内容添加到您的 HTML 标记中：

<a style="text-decoration:none;">My Link</a>

【讨论】：

【解决方案7】：

<style="text-decoration: none">

上面的代码就足够了。只需将其粘贴到要从中删除下划线的链接中即可。

【讨论】：

【解决方案8】：

上述所有代码都不适合我。当我深入研究这个问题时，我意识到它不起作用，因为我将样式放在了 href 之后。当我将样式放在 href 之前时，它按预期工作。

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

【讨论】：