CSS Menu (Ne peut pas obtenir les onglets à pleine hauteur)

Question

<style type="text/css"> 
html, body { 
    background: #fff; 
    margin: 0; 
    padding: 0; 
} 

#nav { 
    font-family: Verdana, sans-serif; 
    height: 29px; 
    font-size: 12px; 
    padding: 0 0 0 10px; /* this is used for something else */ 
    background-color: #456; 
} 

#nav ul, #nav ul li { 
    list-style: none; 
    margin: 0; 
    padding: 9px 0 0 0px; 
} 

#nav ul { 
    text-align: center; 
} 

#nav ul li { 
    display: inline; 
} 

#nav ul li.last { 
    margin-right: 0; 
} 


#nav ul li a { 
    color: #FFF; 
    text-decoration: none; 
    padding: 0px 0 0 20px; 
    height: 29px; 
} 
#nav ul li a span { 
    padding: 8px 20px 0 0; 
    height: 21px; 
} 

#nav ul li a:hover { 
    background: #789; 
} 
</style> 

<div id="nav"> 
    <ul> 
    <li><a href="/1/"><span>One</span></a></li> 
    <li><a href="/2/"><span>Two</span></a></li> 
    <li><a href="/3/"><span>Three</span></a></li> 
    <li><a href="/4/"><span>Four</span></a></li> 
    </ul> 
</div> 

J'ai un petit problème avec cela, car il ne fait pas le "fond de vol stationnaire" 100% de la hauteur de la barre de navigation.

Answer 1

Cela fonctionne sur ma machine:

<style type="text/css"> 
html, body { 
    background: #fff; 
    margin: 0; 
    padding: 0; 
} 

#nav { 
    font-family: Verdana, sans-serif; 
    height: 29px; 
    font-size: 12px; 
    padding: 0 0 0 10px; /* this is used for something else */ 
    background-color: #456; 
} 

#nav ul, #nav ul li { 
    list-style: none; 
    margin: 0; 
    padding: 0 0 0 0px; 
} 

#nav ul { 
    text-align: center; 
    position:relative; 
    width:300px; 
    margin:0 auto 0 auto; 
} 

#nav ul li { 
    float:left; 
} 

#nav ul li.last { 
    margin-right: 0; 
} 


#nav ul li a { 
    float:left; 
    color: #FFF; 
    text-decoration: none; 
    padding: 9px 0 0 20px; 
    height: 20px; 

} 
#nav ul li a span { 
    padding: 8px 20px 0 0; 
    height: 20px; 
} 

#nav ul li a:hover { 
    background: #789; 
} 
</style> 

Answer 2

Avez-vous essayé:

#nav ul li a { 
    color: #FFF; 
    text-decoration: none; 
    padding: 0px 0 0 20px; 
    height: 29px; 
    line-height: 29px; 
} 

Answer 3

Ne réglez pas la hauteur de l'élément le plus externe. Réglez-le sur l'élément le plus interne (nécessite un affichage: bloquer sur votre a-règle en plus de la hauteur).

Answer 4

Vous devez mettre votre rembourrage et la hauteur de ligne sur la une étiquette. Les travées ne sont pas nécessaires, et vous n'avez pas vraiment besoin de rembourrage dans le li non plus. Si l'utilisateur modifie la taille du texte, les arrière-plans de survol sortent de la zone de tabulation.

<style type="text/css"> 
html, body { 
    background: #fff; 
    margin: 0; 
    padding: 0; 
} 

#nav { 
    font-family: Verdana, sans-serif; 
    height: 29px; 
    font-size: 12px; 
    padding: 0 0 0 10px; /* this is used for something else */ 
    background-color: #456; 
} 

#nav ul, #nav ul li { 
    list-style: none; 
    margin: 0; 
    padding: 0px; 
} 

#nav ul { 
    text-align: center; 
} 

#nav ul li { 
    display: inline; 
} 

#nav ul li.last { 
    margin-right: 0; 
} 


#nav ul li a { 
    color: #FFF; 
    text-decoration: none; 
    padding: 8px 20px 7px 20px; 
    line-height:29px; 
} 

#nav ul li a:hover { 
    background-color: #789; 
} 
</style> 

<div id="nav"> 
    <ul> 
    <li><a href="/1/">One</a></li> 
    <li><a href="/2/">Two</a></li> 
    <li><a href="/3/">Three</a></li> 
    <li><a href="/4/">Four</a></li> 
    </ul> 
</div>