HTML / CSS问题 - 宽度:100%不扩展

时间:2012-04-29 14:22:19

标签: html css

这是指向jsFiddle的链接。请注意,锚点(#nav> li> a)没有像它所说的那样扩展:

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

有什么建议吗?

2 个答案:

答案 0 :(得分:4)

你必须使<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>

答案 1 :(得分:2)

http://jsfiddle.net/qkp9w/21/这就是你想要的吗?