首先，我知道这个问题已经被问过一百万次了......并且我专门查看了这个问题以及本网站和其他网站上的其他几个问题。我已经尝试了很多不同的变体，但仍然无法使其工作。
我正在尝试将无序列表居中。它显示正确，只是未居中。目前，它接近中心...但是如果您更改 CSS 中 .nav-container 代码中的“width”参数，那么它会移动 div 的位置。
这是我的CSS：
html *{
font-family: Verdana, Geneva, sans-serif;
}
body {
padding:0px;
margin:0px;
}
.nav-container {
width:460px;
margin: 0 auto;
}
.nav-container ul {
padding: 0px;
list-style:none;
float:left;
}
.nav-container ul li {
display: inline;
}
.nav-container ul a {
text-decoration:none;
padding:5px 0;
width:150px;
color: #ffffff;
background: #317b31;
float:left;
border-left: 1px solid #fff;
text-align:center;
}
.nav-container ul a:hover {
background: #92e792;
color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
color: #ffffff;
background: #12b812;
}
这是我的 HTML：
<body id="admin">
<div id="header">
<center><h2>OMS Tutoring Database</h2></center>
</div>
<div class="nav-container">
<ul>
<a class="tutor-button" href="tutoring.php"><li>Tutoring List</li></a>
<a class="add-button" href="addform.php"><li>Add Students</li></a>
<a class="admin-button" href="admin.php"><li>Admin</li></a>
</ul>
</div>
<div id="content"></div>
</body>
我确信这是一些明显简单的错误，但任何帮助将不胜感激。哦，我目前正在 Chrome 中查看它，因为我正在测试它。
您的 HTML 不正确。
<a><li>float: leftoverflow: hidden<ul>float.nav-containerwidthmargin: 0 auto.nav-container {
text-align: center;
}
.nav-container ul {
display: inline-block;
}
问题是你为 150px 的 li 分配了固定宽度。相反，你应该将宽度分配为 33%，并将 ul 的宽度分配为 100%，这样，无论 div 的大小是什么，三个李将完美居中:)
.nav-container ul {
padding: 0px;
list-style:none;
float:left;
width: 100%
}
.nav-container ul li {
display: inline;
}
.nav-container ul a {
text-decoration:none;
padding:5px 0;
width:33%;
color: #ffffff;
background: #317b31;
float:left;
border-left: 1px solid #fff;
text-align:center;
}
下面的解决方案有点精致：
html * {
font-family: Verdana, Geneva, sans-serif;
}
body {
padding:0px;
margin:0px;
}
.nav-container {
width:460px;
margin: 0 auto;
}
.nav-container ul {
padding: 0px;
list-style:none;
float:left;
}
.nav-container ul li {
display: inline;
}
.nav-container ul a {
text-decoration:none;
padding:5px 0;
width:150px;
color: #ffffff;
background: #317b31;
float:left;
border-left: 1px solid #fff;
text-align:center;
}
.nav-container ul a:hover {
background: #92e792;
color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
color: #ffffff;
background: #12b812;
}
<div id="header">
<center>
<h2>OMS Tutoring Database</h2>
</center>
</div>
<div class="nav-container">
<ul>
<li><a class="tutor-button" href="tutoring.php">Tutoring List</a></li>
<li><a class="add-button" href="addform.php">Add Students</a>
<li><a class="admin-button" href="admin.php">Admin</a></li>
</ul>
</div>
33%的解决方案很适合我。谢谢大家！我一直在努力处理那些没有在中心完美对齐的列表。太棒了！