logo标签列表

如何在HTML中去掉链接下划线？

html
152
在我的页面上，我放了一些链接，但是我不想要任何下划线。那么，我该如何使用HTML去除这些下划线呢？
5
Paic，我不会再去纠正标签了，但是你需要知道的是，唯一消除下划线的方法是使用CSS。即使你在HTML中使用style属性内联添加它，它仍然属于CSS。另外两个标签(presentation和hyperlink)也是完全有效的。在将来，请不要删除（或添加）问题的标签，除非有充分的理由这样做。谢谢！ - 0b10011
1
@bfrohs，我尊重您的话，但我只使用HTML构建我的网站，因此我没有添加更多标签，因为如果我这样做了，可能会得到不同语言的答案。实际上，我对此有点新手，这就是原因。 - Paic Ten
4
如果你想建立符合标准的网站，就不能没有CSS（除非将所有显示内容都使用浏览器默认设置）。HTML = 结构；CSS = 显示。其他标签与不同语言无关 - 它们只是为了帮助人们找到问题和答案。 - 0b10011
2
可能是如何去除锚点（链接）下划线？的重复问题。 - RAS
3
为什么这个问题有那么多的赞？你可以在谷歌上简单搜索一下就能得到答案，而且我相信在StackOverflow上也有很多类似的重复问题。 - Alternatex
8个回答
219
2
太棒了！我在做HTML的所有年份中从未见过这些下划线线条.... ^^ - Alex Cio
2
约翰的回答仍然基本上使用内联样式。分离CSS不仅意味着在HTML中别名化CSS。例如，class="big-and-red"是别名而不是分离。class="meaningful-domain-item"然后css.meaningful-domain-item { //big and red }就是分离。这个答案足以提醒我在我的CSS中使用哪个标签+1。 - Nathan Cooper
1
上述代码对我来说没有用。当我深入研究问题时，我意识到它不起作用是因为我把样式放在了 href 之后。当我把样式放在 href 之前时，它按预期工作。<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a> - Ganesh M S
61
这将从所有链接中删除所有下划线：
a {text-decoration: none; }
如果您想将此应用于特定链接，请给它们命名一个类名称，如nounderline并执行以下操作：
a.nounderline {text-decoration: none; }

这将仅应用于那些链接，并且不会影响所有其他链接。

此代码应放置在文档的 <head> 中或样式表中：

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

在HTML文档的主体部分：

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

我建议使用:hover来避免在鼠标指针悬停在锚点上时出现下划线。

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

  1. Add this to your external style sheet (preferred):

    a {text-decoration:none;}

  2. Or add this to the <head> of your HTML document:

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

  3. Or add it to the a element itself (not recommended):

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

其他答案都提到了text-decoration。有时候你会使用WordPress主题或别人的CSS，链接会被其他方法下划线，这样text-decoration：none就无法关闭下划线。

另外我知道的两种下划线链接的方法是边框和box-shadow。要关闭它们：

border: none;

并且

box-shadow: none;
4

所有上述代码对我都不起作用。当我深入研究问题时，我意识到它之所以不起作用是因为我把样式放在超链接之后。当我把样式放在超链接之前时，它按预期工作了。

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
3
以下不是最佳实践，但有时可能会证明有用

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

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

以上代码已足够。只需将其粘贴到您想要去除下划线的链接中即可。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接