li にリンクをつけるサンプル。

その1: 問題のあるサンプル

・li の中に普通に a リンクを入れた例。
・クリックに反応するのは文字領域だけになる点に注意。
  li の中の文字以外の領域のクリックには反応しない。
  li をボタンに見せているときに不都合になる。

その2

li の領域全体をクリックに反応するようにしたい場合、a を block 要素にする。

.ul22 li a {
	display: block;  /* block要素にする。divと同じ感覚になる */
	...
}

その3: 参考

ul li を使わなくても div と a だけでもできる。
a を block要素にして、div と同じ感覚で並べる。

.div1 a {
	display: block;    /* a を block 要素に */
	float: left;       /* 左右に並べる */
	...

(2015/05-2022/04)
動作 : Edge99, Firefox95