CSS Nav - 最后一项未正确对齐

Question

链接:http://danhumphrey.co.uk/nav/

如您所见，如果将鼠标悬停在最后一项上，则最后一项无法正常工作，您只会看到一半的框。

我试过调整 li、h2 和 a 的填充和边距，但没有成功。

如有任何帮助，我们将不胜感激。

Answer 1

问题是固定宽度的，如下所示进行一些 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

工作 fiddle :http://jsfiddle.net/surendraVsingh/pZkk9/1/