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。