3

重複の可能性:
完全な div へのリンク - html および css

<a>タグがブロック全体をカバーするCSS を構築しようとしている<div>ので、どこでも<div>クリックできます。

最終的な div は次のようになります (画像は 64×64px):

ここに画像の説明を入力

HTMLは次のとおりです。

    <div>
        <img src="" alt=""/>
        <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </div>

CSSグルの助けはありますか？

4

7 に答える 7

8

次のように書くことができるかもしれません：

<a href="#">
        <img src="" alt=""/>
        <h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </a>

CSS

a{
 display:block;
}

<a>注: html5 に従って、タグ内でブロック要素を定義できます

于 2012-09-18T09:05:12.783 に答える
2

ブロック全体をアンカーカバーする必要がある場合は、HTML にそれを反映させる必要があります。ブロックレベルのアンカーは XHTML2/HTML5 からの新しいアイデアですが、最新のほぼすべてのブラウザー (IE 7 を含む) で機能します。

DIV のすべてのコンテンツをアンカーで囲むだけです。

<div>
    <a href="#nohref">
        <img src="" alt="" />
        <h3>On The Beach <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </a>
</div>


div a {
    display: block;
}

参照: http://html5doctor.com/block-level-links-in-html-5/

光沢がありますが、新品ではありません

この手法の興味深い点は、実際にはこれが新しいものではないということです。すぐに実行できます。[…] これは HTML 5 の興味深い点の 1 つです。既存のブラウザーの動作が文書化されています。ブラウザーは既にブロック レベルの要素を囲むリンクを処理しており、明らかな使用例があるため、人為的に構造を無効にする理由はありませんでした。

于 2012-09-18T09:06:58.230 に答える
1

doctype が HTML5 であるため、ブロック全体をアンカーでラップできます。

<a href="yourURL">
<div>
        <img src="" alt=""/>
        <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </div>
</a>

JSは必要ありません:)

于 2012-09-18T09:33:49.643 に答える
1

アンカータグでラップ

 <div>
 <a href="#" class="cont-wrap-link">
 <img src="" alt=""/>
 <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
 <span class="details">Save 10% off all package holidays</span>
 <a>
 </div>

CSS

div a.cont-wrap-link
{padding:0px; margin:0px;
 display:block;
 text-decoration:none;
}
于 2012-09-18T09:05:22.677 に答える
1

この投稿をチェックしてください

注意: CSS が存在しない場合でも、ドキュメントの構造が適切であることを確認してください。

アップデート

HTML5を使用してこれを実現できます。これをチェック

于 2012-09-18T09:23:26.060 に答える
0

onclick="location.href='http://google.com';" style="cursor:pointer;"div タグに追加することをお勧めします。

于 2012-09-18T09:05:15.003 に答える
0

これはおそらくややハックな CSS で行うことができますが、この場合は JS (jQuery) の方が簡単だと思います。

$('#the-div').click(function () {
    $(this).find('a').eq(0).click();
});

または次のようなもの：

var theDiv = document.getElementByID('the-div');

theDiv.onclick = function () {
    window.location = theDiv.getElementsByTagName('a')[0].href;
};
于 2012-09-18T09:03:24.247 に答える