html - HTML/CSS の問題 - 幅: 100% 拡大しない

Question

これはjsFiddleへのリンクです。アンカー (#nav>li>a) は、次のように言われたときに想定どおりに展開されないことに注意してください。

#nav li a {
    width: 100%;
    height: 100%;
}

助言がありますか？

Answer 1

ブロック要素を作成し<a>、その親に幅を与える必要があります

#nav {
  width: 100%;
  overflow: hidden;
}
#nav li {
  float: left;
  height: 40px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  width: 100%;
}
#nav li a {
  width: 100%;
  height: 100%;
  display: block
}
#nav li a:hover {
  background: #0ff;
}

<ul id="nav" class="top">
  <li><a href="">Home</a></li>
  <li><a href=""><img src="" alt=""></a></li>
  <li><a href=""><img src="" alt=""></a></li>
  <li><a href=""><img src="" alt=""></a></li>
</ul>

Answer 2

http://jsfiddle.net/qkp9w/21/これはあなたが望むものですか？