Q&A
実現したいこと
aタグのクリック範囲を、親要素いっぱいに広げたいです。
広げること自体は、aタグをblock化してwidth、heightを100%にする事で出来るのですが、
親要素(↓の場合はdiv)にpaddingがついていると、paddingが無い時の範囲までしか広がりません。
できればdivのCSSはいじらずに、aタグのCSSに工夫をしてdivのpaddingも含めた範囲まで、
aタグのクリック範囲を広げたいです。(親要素のpadding分をaタグに移すなどはできればしたくないです。)
可能な方法があればご教授お願いします。
該当のソースコード
html
1<! DOCTUPE html> 2<html> 3 <head> 4 <style> 5 div { 6 width:200px; 7 height:2em; 8 border:solid 1px black; 9 padding:20px; 10 } 11 12 a { 13 display:block; 14 width:100%; 15 height:100%; 16 background:red; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 <a href="#">link</a> 23 </div> 24 </body> 25</html>
(borderがdivの範囲。赤背景がaタグの範囲。)
回答3件
0
ネガティブマージンで<a>の範囲を広げることはできますが、
aタグのクリック範囲を広げたいです。
もしこれが本当に達成したいことなら、
js
1let div = document.querySelector('div'); 2div.addEventListener('click', e => { 3 if (e.target == div) 4 e.target.firstElementChild.click(); 5});
でもよいかもしれませんし、
親要素のpadding分をaタグに移すなどはできればしたくないです。
こちらが本当に解くべき問題なのではないでしょうか。親要素のパディングを消せない理由はなんでしょうか。
投稿2021/10/17 14:39
総合スコア21695
0
ベストアンサー
ネガティブマージンで広げて、ずれた分をパディングで打ち消す。
css
1a { 2 display: block; 3 width:100%; 4 height:100%; 5 background: red; 6 margin: -20px; /* 追加 */ 7 padding:20px; /* 追加 */ 8}
(親要素のpadding分をaタグに移すなどはできればしたくないです。)
a要素自体の設定を変更したくないなら、疑似要素で。
css
1div { 2 width:200px; 3 height:2em; 4 border:solid 1px black; 5 padding:20px; 6 position: relative; /* 追加 */ 7} 8 9a { 10 display:block; 11 width:100%; 12 height:100%; 13 background:red; 14} 15 16/* 以下追加 */ 17a::after { 18 content: ""; 19 display: block; 20 position:absolute; 21 top:0; 22 bottom: 0; 23 left: 0; 24 right: 0; 25}
投稿2021/10/17 14:25
総合スコア34075
0
css
1 a { 2 margin: -20px; 3 display: block; 4 height: calc(40px + 2em); 5 background: red 6 }
投稿2021/10/17 13:56
総合スコア1128
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。