html - 如何从 HTML 中的链接中删除下划线？

Question

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

score 207 · Accepted Answer

内联版本：

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

但是请记住，您通常应该将网站的内容（即HTML）与演示文稿（即CSS）分开。因此，您通常应该避免使用内联样式。

score 58 · Accepted Answer

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

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>

score 18 · Accepted Answer

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

a:hover {
   text-decoration:none;
}

score 6 · Accepted Answer

或者将其添加到<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>

score 5 · Accepted Answer

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

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

border: none;

和

box-shadow: none;

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

<style="text-decoration: none">

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

8 回答 8