如何删除下划线从 HTML 链接？

在我的页面中，我已经放置了一些链接，在这些链接下面我不想要任何一行，那么，我如何使用 HTML 来删除这些链接呢？

523826 次浏览
小开

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

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>
小开

  1. 将其添加到外部样式表(更喜欢) :

    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>
小开
最佳答案

内联 版本:

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

不过请记住，你 应该一般是从 分开的内容你的网站(这是 超文本标示语言) ，演示文稿(这是 CSS)。因此，你一般应该 避免内联样式。

请参阅 约翰的回答以查看使用 CSS的等效答案。

小开

以下并不是最佳实践，但有时可以证明是有用的

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

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

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

小开

我建议使用: 悬停，以避免下划线，如果鼠标指针是在一个锚

a:hover {
text-decoration:none;
}
小开

其他的答案都提到了文字装饰。有时你使用 Wordpress 主题或者其他人的 CSS，其中链接用其他方法加下划线，这样文本修饰: 没有一个不会关闭下划线。

边框和方框阴影是我知道的另外两种下划线链接的方法。关闭它们:

border: none;

还有

box-shadow: none;
小开

所有上面提到的代码对我来说都不起作用。当我深入研究这个问题时，我意识到它不起作用，因为我把风格放在了 href 之后。当我把风格之前的 href 它是工作的预期。

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

提交答案