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 .