在 DIV 中居中无序列表
Posted
技术标签:
【中文标题】在 DIV 中居中无序列表【英文标题】：Center unordered list in DIV 【发布时间】：2012-12-18 06:43:21 【问题描述】：首先，我知道这个问题已经被问过一百万次了……我已经查看了this one specifically 以及该站点和其他站点上的其他几个问题。我已经尝试了很多不同的变体，但仍然无法让它发挥作用。
我正在尝试使无序列表居中。它显示正确，只是没有居中。目前，它离中心很近……但是如果您更改 CSS 中 .nav-container 代码中的“宽度”参数，那么它会移动 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 中查看它，因为我正在测试它。
jsFiddle
【问题讨论】：
两个注意事项：您已将列表项包装到<a>-tags 中。这不是有效的 HTML - 您应该像这样使用它：<li><a></a></li>。并且您可以为您的问题创建一个小提琴，以便有人可以轻松地看到您的问题并即时尝试。我为您创建了一个：jsfiddle.net/GLyEB
很抱歉。我回去并修复了将 标记放在 标记内的代码。我仍然有同样的问题。
【参考方案1】：
您的 HTML 不正确。 <a> 标签应该在 <li> 标签内。要使列表项内联，请在它们上设置float: left，并将overflow: hidden 设置为<ul>，使其适合其子项。删除.nav-container 上的float，这是不必要的。看看这个codepen。
当你改变它的宽度时，导航会移动，因为它使包装器居中，而不是导航本身。您可以删除width 和margin: 0 auto 并尝试：
.nav-container
text-align: center;
.nav-container ul
display: inline-block;
【讨论】：
四年半后，你也拯救了我的一天。 感谢完美的解决方案。【参考方案2】：问题是您为 150px 的 li 分配了固定宽度。相反，您应该将宽度分配为 33%，并将 ul 的宽度分配为 100%，这样，无论 div 的大小如何就是，三个li会完美居中:)
Here's the updated JSFIDDLE
.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;
【讨论】：
【参考方案3】：下面的解决方案稍微提炼了一点：
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>
试试看： http://jsfiddle.net/hg9qvL70/2/
【讨论】：
以上是关于在 DIV 中居中无序列表的主要内容，如果未能解决你的问题，请参考以下文章