HTML/CSS Issue - width: 100% не распространяется

Question

Это ссылка на jsFiddle. Обратите внимание на то, что якорь (#nav> li> а) не расширяется, как предполагается, когда он сказал:

#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/ Является ли это то, что вы хотите?