>
[CSS] li の中の a の範囲を全体に広げる方法。width、borderに対応
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;
}