css - CSS文本装饰问题

Question

我有一个已超链接的文本框，问题是我试图从超链接文本中删除下划线。

该text-decoration:none;设置应该删除它，但它似乎不起作用。

如何从超链接文本中删除此下划线？

HTML：

<a href=""><div class = "i6">Test Page</div></a>

CSS：

.i6 {
  height:30px; 
  width:80px;
  position:absolute;
  left:1150px;
  top:10px;
  font-family: Lucida Sans;font-size:15px; 
  color: #FFFFFF;
  background-color:#C1DAD4; 
  margin:10px;
  list-style:none;
  text-align:center;
  padding-top:0px;
  padding-bottom:10px;
  padding-right:2px;
  padding-left:0px;
  text-decoration:none;
}

Answer 1

您需要应用text-decoration:none; 到链接本身，而不是内部div.

例如，您可以给链接本身一个类，例如：

<a href="" class="theLink"><div class = "i6">Test Page</div></a>

然后在您的 CSS 中，您可以定位链接本身：

.theLink {
  text-decoration:none;
}

这是一个有效的jsFiddle。