リストタグのクリック適用範囲を拡大する
状態:-
閲覧数:2,428
投稿日:2015-07-13
更新日:2018-03-05
グローバルナビ作成
HTML
<ul>
<li class="gnavi><a href="#">リスト</a></li>
<li class="gnavi><a href="#">リスト</a></li>
<li class="gnavi><a href="#">リスト</a></li>
<li class="gnavi><a href="#">リスト</a></li>
</ul>
CSS
/*---------- 共通ページ ----------*/
/*グローバルナビ表示*/
.gnavi {
display:inline-block;
width: 100%; //クリックしたい大きさ
height: 100%; //クリックしたい大きさ
}
.gnavi a {
display: block; //これがポイント
text-decoration: none;
}
CSS3では指定子要素を持つ親要素は選択不可だが、指定親要素を持つ子要素は選択可能
box-sizingは危険なCSS ／ レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う