aタグのリンクの範囲をテキストではなく親要素まで拡大させるCSS

更新日：2022年6月14日

グローバルメニューをulタグとliタグで作成して、そのliタグの中にaタグを設定してテキストで囲む……よくある使い方ですよね。
ただこれだとaタグが設定してあるテキストの範囲までしかリンクの範囲がありません。
その親要素のliタグの幅までリンクの範囲を伸ばせないものか…と考えたあなた、良い方法があります。

aタグはインライン要素です。だからテキストの範囲までしかリンクの範囲が及ばないんですね。
だったらブロック要素にしてあげればいいということになります。

CSSは以下のように記述します。

a {
	display: block;
}

たったこれだけで解決です。

万が一それでもならないよって方は、何処か別のCSSの干渉を受けている可能性があるので、liタグとaタグにwidth: 100%;を設定してあげて下さい。