如何删除html中链接的下划线[重复]答案

【问题标题】：How to remove the underline for link in html [duplicate]如何删除html中链接的下划线[重复]
【发布时间】：2016-10-04 13:35:10
【问题描述】：

如何去掉链接的下划线？这是我的代码我尝试在那里输入一些代码，但仍然无法正常工作

@charset "utf-8";
/* CSS Document */
.top {
  color:black;
  font-family:Calibri;
  text-decoration:none;
}

table {

}

<table>
  <tr>
    <td><a href="Home.html"><p class="top">Home</p></a></td>
  </tr>
</table>

【问题讨论】：

标签： html css

【解决方案1】：

您的.top 类更改了p 标记的样式，但是设置text-decoration 的是a 标记，因此您必须指定它或将另一个类添加到您的a 标记中并将其设置为text-decoration 属性。

一种可能的方式：

<table>
  <tr>
    <td>
      <a href="Home.html" class="no-underline">
        <p class="top">Home</p>
      </a>
    </td>
  </tr>
</table>

和

.no-underline {
  text-decoration: none;
}

【讨论】：

【解决方案2】：

应该是这样的：

a {
  text-decoration: none;
}

【讨论】：

【解决方案3】：

您必须将text-decoration: none 设置为<a> 标签本身，而不是设置在其中的<p>。

【讨论】：

【解决方案4】：

您正在寻找text-decoration:none

试试，

a {
    text-decoration:none;
}

【讨论】：

【解决方案5】：

我将.top 替换为a 标签

@charset "utf-8";
/* CSS Document */
a {
    color:black;
    font-family:Calibri;
    text-decoration:none;
}

table {

}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css.css">`enter code here`

</head>

<body>
<table>
    <tr>
        <td><a href="Home.html"><p class="top">Home</p></a></td>
    </tr>
</table>
</body>
</html>

【讨论】：