显示下划线的文本下划线答案

【问题标题】：Text Underline Showing Underline显示下划线的文本下划线
【发布时间】：2013-08-22 20:52:12
【问题描述】：

我似乎遇到了下划线的问题。我有一个可链接的盒子：

<div class="single_box">
   <a href="servicesweprovide.asp"><img src="images/law_enforcement_accreditation.jpg" alt="" />
   <p>Law Enforcement<br />Accreditation</p></a>
</div>

这是 CSS：

.single_box {
    width:253px;
    min-height:170px;
    float:left;
    margin:0px 15px 0 0;
    padding:0px;
    text-decoration:none;
}
.single_box p{
    background:url(../images/arrow.png) 92% 50% #0b2e84 no-repeat;
    font:bold 16px/18px  Arial, Helvetica, sans-serif; color:#fff;
    padding:6px 14px;
    word-spacing:normal;
    letter-spacing:normal;
    font-stretch:normal;
    cursor:pointer;
    text-decoration:none;
}
.single_box p:hover {
    background-color:#ffc210;
    text-decoration:none;
}

我在 JFiddle 上设置了它：http://jsfiddle.net/2EHkp/

我感觉这与我针对<p> 段落而不是href 有关。但我不知道如何定位href而不是<p>。有人可以告诉我我做错了什么吗？

【问题讨论】：

不允许在内联元素（a）中使用块级元素（p）。
@LinkinTED - Actually, that's not true as of HTML5.
是的，你是对的，我的评论只有在

标签： html css underline

【解决方案1】：

锚链接...默认情况下，如果您没有使用任何 CSS，例如 text-decoration:none;

请在您的 .single_box 类下添加一个额外的类

这是我的代码：

.single_box a{text-decoration:none;}

【讨论】：

【解决方案2】：

要定位 href，您可能需要：

.single_box a{text-decoration:none;}

【讨论】：

【解决方案3】：

默认情况下，链接的文本装饰带有下划线。因此，您需要将其关闭：

.single_box a {
    text-decoration: none;
}

【讨论】：

【解决方案4】：

您需要选择锚点。而不是容器。 http://jsfiddle.net/2EHkp/1/

.single_box a {text-decoration:none;}

这就是你所拥有的：

.single_box  {text-decoration:none;}

【讨论】：

【解决方案5】：

.single_box a {text-decoration:none;}

【讨论】：

做到了...为什么我没有想到 :( uggg 谢谢！