[CSS] li の中の a の範囲を全体に広げる方法。width、borderに対応

CSS
投稿日:
カテゴリー HTML/CSS

li の中の a の範囲を全体に広げる方法を紹介します。

広告

ネットで検索すると、2つ方法が見つかります。一つは、aにposition: absoluteを適用する方法です。しかし、この方法では親要素のwidthを指定する必要があります。

もうひとつは、aにdisplay: blockを指定する方法です。今回はこちらの説明をします。

なお、liをaで囲んでも動きますが、これは禁止されています。

ソースコード

HTML

<ul class="test">
<li><a href="#">リンク</a></li>
<li><a href="#">リンクリンク</a></li>
<li style="height: 100px"><a href="#">リンクリンク</a></li>
</ul>

liのborder上ではa:hoverが効きません。border上でli:hoverだけ効いている状態になるため、ちぐはぐな見た目になってしまいます。これは、aにborderを指定することで解決できます。

CSS

ul.test li{
	display: inline-block;
}

ul.test li a{
	display: block;
	padding: 2px 5px;
	color: #333;
	border: 2px solid #333;
}

ul.test li:hover{
	background: #333;
}

ul.test a:hover{
	color: #fff;
}

サンプル

広告