如何从 HTML 中的链接中删除下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10853881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove underline from a link in HTML?
提问by Paic Ten
In my page I have put some links under which I don't want any line, so, how can I remove that using HTML?
在我的页面中，我放置了一些我不想要任何行的链接，那么，如何使用 HTML 删除它？
回答by patryk.beza
Inlineversion:
内联版本：
<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>
However remember that you shouldgenerally separatethe content of your website (which is HTML), from the presentation (which is CSS). Therefore you should generally avoid inline styles.
但是请记住，您通常应该将网站的内容（即HTML）与演示文稿（即CSS）分开。因此，您通常应该避免使用内联样式。
See John's answerto see equivalent answer using CSS.
请参阅John's answer以查看使用CSS 的等效答案。
回答by John Conde
This will remove all underlines from all links:
这将从所有链接中删除所有下划线：
a {text-decoration: none; }
If you have specific links that you want to apply this to, give them a class name, like nounderlineand do this:
如果您有要应用它的特定链接，请给它们一个类名，例如nounderline并执行以下操作：
a.nounderline {text-decoration: none; }
That will apply only to those links and leave all others unaffected.
这将仅适用于那些链接，而不会影响所有其他链接。
This code belongs in the <head>of your document or in a stylesheet:
此代码属于<head>您的文档或样式表：
<head>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
</head>
And in the body:
在体内：
<a href="#" class="nounderline">Link</a>
回答by Roman
I suggest to use :hover to avoid underline if mouse pointer is over an anchor
如果鼠标指针位于锚点上，我建议使用 :hover 来避免下划线
a:hover {
text-decoration:none;
}
回答by 0b10011
Add this to your external style sheet (preferred):
a {text-decoration:none;}Or add this to the
<head>of your HTML document:<style type="text/css"> a {text-decoration:none;} </style>Or add it to the
aelement itself (not recommended):<!-- Add [ style="text-decoration:none;"] --> <a href="http://example.com" style="text-decoration:none;">Text</a>
将此添加到您的外部样式表（首选）：
a {text-decoration:none;}或者将其添加到
<head>您的 HTML 文档中：<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>
回答by Joe Golton
The other answers all mention text-decoration. Sometimes you use a Wordpress theme or someone else's CSS where links are underlined by other methods, so that text-decoration: none won't turn off the underlining.
其他答案都提到了文字装饰。有时您使用 Wordpress 主题或其他人的 CSS，其中链接由其他方法加下划线，因此 text-decoration: none 不会关闭下划线。
Border and box-shadow are two other methods I'm aware of for underlining links. To turn these off:
Border 和 box-shadow 是我所知道的另外两种用于下划线链接的方法。要关闭这些：
border: none;
and
和
box-shadow: none;
回答by nebulousGirl
The following is not a best practice, but can sometimes prove useful
以下不是最佳实践，但有时证明是有用的
It is better to use the solution provided by John Conde, but sometimes, using external CSS is impossible. So you can add the following to your HTML tag:
最好使用 John Conde 提供的解决方案，但有时，使用外部 CSS 是不可能的。因此，您可以将以下内容添加到您的 HTML 标签中：
<a style="text-decoration:none;">My Link</a>
回答by sd1990
<style="text-decoration: none">
The above code will be enough.Just paste this into the link you want to remove underline from.
上面的代码就足够了。只需将其粘贴到要从中删除下划线的链接中即可。
回答by Ganesh M S
All the above-mentioned code did not work for me. When I dig into the problem I realize that it was not working because I'd placed the style after the href. When I placed the style before the href it was working as expected.
上述所有代码对我都不起作用。当我深入研究这个问题时，我意识到它不起作用，因为我将样式放在 href 之后。当我将样式放在 href 之前，它按预期工作。
<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
