liタグ内のaタグのクリック範囲をliに合わせる

画像のHOMEを囲む赤線がaタグ範囲で、色々cssをいじってliの範囲にまで拡大をしようとしているのですが全く上手くいきません・・・答え教えてください・・・下記にソースコードを載せましたので色々教えてくれたらすごく助かります！
画像

css3
1コード
2 
3header {
4	background: #28aae1;
5	color: #fff;
6	list-style: none;
7	width: 100%;
8    z-index: 1000;
9}
10
11header ul {
12}
13
14header li {
15	display:inline-block;
16	padding:10px 15px;
17}
18
19header li a{
20	width:100%;
21	height:100%;
22}
23

html5
1コード
2 <body>
3  <header>
4   <ul>
5    <li><a href="#">HOME</a></li>
6    <li><a href="#">HOME</a></li>
7   </ul>
8  </header>
9</body>

回答3件

ベストアンサー

こんな感じでどうでしょうか。

css
1header li {
2    display:inline-block;
3}
4
5header li a{
6    display:block;
7    width:100%;
8    padding:10px 15px;
9}

width:100%;はdisplay:block;等が指定されていない場合は有効になりません。
aタグはdisplay:inline;が初期値のためこれを変更してあげる必要があります。

詳しいことは「html 要素ブロックインライン」などで調べてみてください。

投稿2016/05/16 08:44

退会済みユーザー

総合スコア0

回答へのコメント

polynn

2016/05/16 12:50

とても分かりやすかったです。ありがとうございました！

css
1a{
2display:block;
3height:100%;
4width:100%
5}
6コード

でいけます。
上記の方もおっしゃっているように、aタグはインライン要素の為
高さ、横幅を持てません。
なので、block要素にしてあげて高さと横幅を親要素を引き継ぐ為100％に指定します。

aタグの中にpタグはhtml5であれば大丈夫ですが、それ以下の場合インライン要素の中にブロック要素は置けないので注意してください。

投稿2016/05/16 11:29

chiro.0519

総合スコア118

回答へのコメント

polynn

2016/05/16 12:51

ありがとうございました！！(☝ ՞ਊ ՞)☝

こんにちは。

基本的にはhide2e3rさんが回答いただいているものでいいかなーと思うのですが
個人的にはaタグの中にさらにpタグ突っ込んでそっちでpaddingするほうが好きです。

css
1header {
2    
3    color: #fff;
4    list-style: none;
5    width: 100%;
6    z-index: 1000;
7}
8
9header ul {
10    list-style: none;
11    padding:0px;
12    margin:0px;
13}
14
15header li {
16    display:inline-block;
17    margin:0px 10px;
18}
19
20header li a{
21    display:block;
22    width:100%;
23    height:100%;
24}
25
26header li.type1 a{
27    padding:10px 15px;
28}
29
30header li a p{
31    padding:10px 15px;
32    margin:0px;
33}

html
1  <header>
2   <ul>
3    <li class="type1"><a href="#">HOME</a></li>
4    <li class="type1"><a href="#">HOME</a></li>
5    <li><a href="#"><p>HOME</p></a></li>
6    <li><a href="#"><p>HOME</p></a></li>
7   </ul>
8  </header>