css - 菜单栏不在页面中心，我已经尝试了一切

Question

由于某种原因，即使我输入了许多不同的代码，以下代码也不会在页面上居中。

这是代码：

@charset "utf-8";
/* CSS Document */

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",       Monaco, "Courier New", monospace;
margin: 0 0 3em 0;
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:#00BFFF;
}
#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}

请记住，导航栏位于标题内。

Answer 1

试试看

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",           Monaco, "Courier New", monospace;
margin: 0 auto 3em;
width: XXpx
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}

并定义宽度

编辑：

function onload() {
document.getElementById("nav").style.marginLeft = Math.round(document.getElementById("nav").offsetWidth/2)+"px";}

Answer 2

jsFiddle

您只需要删除 上的显示属性<ul>并为其指定宽度。我还删除了列表中的填充。