html - テキストの下線 下線を表示

Question

下線に問題があるようです。リンク可能なボックスがあります：

<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 ではなく Paragraph をターゲットにすることに関係していると感じています。しかし、の代わりに href をターゲットにする方法がわかりません<p>。誰かが私が間違っていることを教えてもらえますか?

Answer 1

リンクの text-decoration はデフォルトで下線付きです。したがって、それをオフにする必要があります。

.single_box a {
    text-decoration: none;
}

Answer 2

アンカーを選択する必要があります。コンテナの代わりに。http://jsfiddle.net/2EHkp/1/

.single_box a {text-decoration:none;}

これはあなたが持っていたものです：

.single_box  {text-decoration:none;}

Answer 3

href をターゲットにするには、次のものが必要になる場合があります。

.single_box a{text-decoration:none;}