1

テキストを含むボックス全体 (< div > で区切られている) をリンクとして機能させたいのですが、そのリンク内のテキストにもスタイルを設定したいと考えています。両方を取得できないようです：

(1)

HTML

<a href="#" onclick="toggle('category')"><div class="categoryName">Test</div></a>

CSS

.categoryName {
    border: 1px solid black;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 5px;
}
.categoryName a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

この場合、ボックス全体 (縁取りされた < div >) がリンクとして機能しますが、テキスト "Test" はスタイル設定されていません (標準の Web リンクとして表示されます)。

(2)

HTML

<div class="categoryName"><a href="#" onclick="toggle('category')">Test</a></div>

CSSも同じ

この場合、テキストのスタイルが設定されていますが、ボックスはリンクとして機能せず、テキストのみとして機能します。

ボックスをリンクとして機能させ、テキストのスタイルを設定するにはどうすればよいですか?

4

3 に答える 3

0

これを行うだけで同じことを達成できると思います：

html

<a class="blocklink" href="#" onclick="toggle('category')">Test</a>

CSS

.blocklink {
    display:block; /* ! */
    border: 1px solid black;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 5px;
    color: black;
    text-decoration: none;
    font-weight: bold;
}

... div はまったく必要ありません。

于 2013-08-15T22:13:05.467 に答える