結論
aタグの親要素にpaddingが設定されている場合、padding要素部分にはクリック範囲が設定されない。
問題があったコード
html
<li>
<a href="{{ $url }}">"click"</a>
</li>
css
.li {
position: relative;
width: 70px;
height: 35px;
padding: 20px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #e8e9ec;
border-radius: 5px;
background: #fff;
}
.li a {
display: block; /* aタグのクリック範囲を親要素のliいっぱいに広げる...はず */
background: red; /* aタグの範囲を明確にするために付与 */
}
aタグのCSSにdisplay:blockを設定しているため、親要素のliの範囲いっぱいにクリックできる範囲が広がるはずです。
...が、下記画像の通り背景が赤くなっている部分しかクリックに反応しませんでした。
対処
初めに記載した通り、親要素にpadding部分にはクリック範囲が適応されないため、paddingの設定が必要な場合は子要素のaタグのほうで指定してあげました。
css
.li {
position: relative;
width: 70px;
height: 35px;
/* padding: 20px 20px; */ /* 親要素ではなく */
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #e8e9ec;
border-radius: 5px;
background: #fff;
}
.li a {
display: block;
padding: 20px 20px; /* 子要素で指定してあげる */
background: red;
}
無事親要素いっぱいにクリック範囲が広がりました
参考
↧