CSS菜單（不能讓標籤全高）

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> 

我有一個小問題，因爲它不會使「懸停背景」100％的導航欄的高度。

Answer 1

此工程在我的機器上：

<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

你嘗試過：

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

Answer 3

不要設置高度的最外層元素上。將其設置在最裏面的元素上（除了高度以外，還需要a-rule上的display：block）。

Answer 4

你應該把你的填充和行高在一個標籤。跨度不需要，你也不需要任何填充。如果用戶改變了文字大小，懸停背景就會出現在tabe區域。

<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>