0

私はこのコードを持っています:

<ul>
    <li><a href="www.google.com"><img src="foobar.jpg" /></a></li>
    <li><a href="www.google.com"><img src="foobar.jpg" /></a></li>
</ul>

li {
    width: 100px;
    height: 100px;
    background: red;
    width: 500px;
}
img {
    margin: 0 auto;
    display: block;
}

ここでわかるように、画像の両側でクリックすることもできます..なぜですか? 画像をクリックできるようにしたいだけです。

4

5 に答える 5

0

あなたの img タグがブロックに表示されます。li 全体がクリック可能にならないようにするには、これをオフにします。

于 2013-07-10T16:44:20.370 に答える
0

これは、画像をブロックとして表示していて、幅がデフォルトで li の幅になるために発生します。

于 2013-07-10T16:44:34.230 に答える
0

imgでは、 を に設定displayしますblock。これは、行全体を占めることを意味し、その行には他に何も表示されません。幅を設定しなかったため、これはimgコンテナーが行全体を占有することを意味します。それをラップしたaので、行全体がクリック可能になります。に幅を設定するかimg、取り出しますdisplay:block

于 2013-07-10T16:44:59.577 に答える
-2

アンカー タグは、リスト項目要素を左から右に埋めます。つまり、クリックするのはリスト要素ではなく、コンテンツ、つまりアンカーです。いつものように...

于 2013-07-10T16:44:33.043 に答える