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

130

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

html

— 派克十
source

4

Paic，我不会再费劲地回滚标签，但是要知道，删除下划线的唯一方法是使用CSS。是的，即使您将其与HTML内联添加（在style属性中），它仍然是CSS。其他两个标签也完全有效（presentation和hyperlink）。将来，除非有正当理由，否则请勿删除（或添加）问题标签。谢谢！

— 0b10011 2012年

@bfrohs我尊重您的话，但我仅使用HTML构建我的网站，因此我没有添加更多标签，因为如果这样做，我可能会获得其他语言的答案。其实我对此有点新手，这就是原因。

— Paic 2012年

3

没有CSS，您将无法建立符合标准的网站（除非您为所有演示文稿使用浏览器默认值）。HTML =结构；CSS =演示文稿。其他标签与另一种语言无关-它们仅用于帮助人们找到问题和答案。

— 0b10011 2012年

1

如何删除锚点（链接）的下划线的

— RAS

2

为什么这个问题有那么多赞成票？您可以在单个Google搜索中从字面上回答它，而且我敢肯定，StackOverflow上有很多重复项。

— Alternatex

192

内联版本：

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

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

请参阅John的答案，以了解使用CSS的等效答案。

— patryk.beza
source

1

杀手！在我做html的所有年份中，我从未见过这些下划线。^^

— Alex Cio

1

John的答案仍然基本上使用内联样式。分隔CSS不仅意味着在HTML中为CSS加上别名。例如class="big-and-red"，混叠不是分隔。class="meaningful-domain-item"然后.meaningful-domain-item { //big and red }是CSS 。这个答案足以提醒我在CSS +1中使用哪个标签。

— 内森·库珀

上面的代码对我不起作用。当我研究问题时，我意识到它不起作用，因为我将样式放在了href后面。当我将样式放在href之前时，它可以按预期工作。<a href=" yoursite.com“style="text-decoration:none">您的网站 </a>

— Ganesh MS，

55

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

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>

— 约翰·康德
source

15

我建议使用：hover来避免鼠标指针悬停时出现下划线

a:hover {
   text-decoration:none;
}

— 罗曼
source

6

将此添加到您的外部样式表（首选）：
```
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>

— 0b10011
source

4

其他答案都提到文本装饰。有时，您使用Wordpress主题或别人的CSS，而链接用其他方法加下划线，因此文本装饰：没有一个不会关闭下划线。

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

border: none;

和

box-shadow: none;

— 乔·高尔顿
source

2

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

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

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

— 星云少女
source

1

<style="text-decoration: none">

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

— sd1990
source

1

上述所有代码均不适用于我。当我研究问题时，我意识到它不起作用，因为我将样式放在了href后面。当我将样式放在href之前时，它可以按预期工作。

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

— 加内什女士
source