centering - 导航菜单未使用 960 网格正确居中

Question

我正在尝试为某人创建一个基本配置文件，并且正在练习使用 960 网格系统。

从那以后，我已经掌握了使用网格来定位大多数元素的窍门，但是菜单对我来说似乎有点不对劲，右侧似乎比左侧大，即使我将菜单本身居中并且它的宽度为 100% .

有没有人知道它为什么会出现？

网站 url 是http://digitalgenesis.com.au/sites/alice css 是http://digitalgenesis.com.au/sites/alice/css/main.css

Answer 1

减少“.nav a:hover”-s 填充。我认为这是问题所在。

Answer 2

试试这样的 CSS：

.nav{margin-top: 20px;background:black; color:white;  padding-top:10px; padding-bottom:10px;text-align:center; }

.nav li{display:inline; }
.nav a:hover{background:white; color:black; padding:10px 0px 10px 0px;}
.nav a{text-decoration:none; color:white; }
.footer{background:black; color:white; margin-top:20px; position:fixed; width:100%; bottom:0px;}

#top{width:100%; background:black; color:white;}

.title{font-size:26px; margin-top:45px; padding-left :10px;}

.wrapper{margin-top:50px;}

.logo{margin-left:0px;}