CSS導航 - 最後一個項目沒有正確對齊

Question

鏈接：http://danhumphrey.co.uk/nav/

正如你可以看到，如果你將鼠標懸停在最後一個項目你只能得到一半的盒子中的最後一項工作不正常。

我試過玩填充和邊緣的li,h2和a並沒有成功。

任何幫助將不勝感激。

Answer 1

您已經定義內嵌Width最後一個li元素 - width: 40px;

寬度是沒有必要的，可以將其刪除，或者如果你需要它由於某種原因，然後將其提高到width: 95px;，它會工作。在最新測試過的火狐

Answer 2

您的問題是你改變這是在灰色杆前面的鏈接的背景，但不寬。您有幾種選擇：

• 固定菜單項的寬度，並確保他們加起來正確的寬度（可能包括邊界）或

• 坐落在a元素的所有背景（這樣大小自然是相同的）

Answer 3

刪除內嵌style="width: 40px;"這行添加到您的CSS：

nav ul li:last-child{width: 91px;} 

Answer 4

的問題是使如下一些CSS改變的固定寬度：

nav { 
height: auto; 
padding: 0; 
margin: 23px auto 0; 
display: block; 
position: relative; 
text-align: center; 
line-height: 23px; 
height: 29px; 

} 
ul#headNav { 
padding: 0px 0 0 0; 
display: inline-block; 
background: #7F7C74; 
background: -moz-linear-gradient(top, #7F7C74 0%, #94918A 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7F7C74), color-stop(100%,#94918A)); 
background: -webkit-linear-gradient(top, #7F7C74 0%,#94918A 100%); 
background: -o-linear-gradient(top, #7F7C74 0%,#94918A 100%); 
background: -ms-linear-gradient(top, #7F7C74 0%,#94918A 100%); 
background: linear-gradient(top, #7F7C74 0%,#94918A 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7c74', endColorstr='#94918a',GradientType=0); 
} 

注：我只是刪除width:960px;從<nav> &添加text-align:center它&感動了所有梯度CSS & display:inline-block;到#headNav

工作小提琴：http://jsfiddle.net/surendraVsingh/pZkk9/1/