Html 在 DIV 中居中无序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14146783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center unordered list in DIV
提问by Austin Dennis
First of all, I know this question has been asked a MILLION times...and I've looked at this one specificallyas well as several others on this site and other sites. I've tried a ton of different variations on each of these and still can't get it to work.
首先，我知道这个问题已被问过一百万次……而且我已经专门研究过这个问题以及本网站和其他网站上的其他几个问题。我已经尝试了大量不同的变体，但仍然无法正常工作。
I'm trying to center an unordered list. It displays correctly, it's just not centered. At the moment, it's CLOSE to center...but if you change the "width" parameter in the .nav-container code in the CSS then it shifts the position of the div.
我试图将一个无序列表居中。它显示正确，只是没有居中。目前，它已接近居中……但是如果您更改 CSS 中 .nav-container 代码中的“宽度”参数，则会移动 div 的位置。
Here is my CSS:
这是我的 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;
}
And here is my HTML:
这是我的 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>
I'm sure it's some glaringly simple error, but any help would be much appreciated. Oh, and I'm currently viewing it in Chrome as I'm testing it.
我确信这是一个非常简单的错误，但任何帮助将不胜感激。哦，我目前正在 Chrome 中查看它，因为我正在测试它。
回答by Angel Yan
Your HTML is incorrect. The <a>tags should be inside the <li>tags. To make the list items be inline, set float: lefton them, and overflow: hiddento the <ul>so it fits its children. Remove the floaton .nav-container, its unecessary. Take a look at this codepen.
And the nav moves when you change its width because it you centered the wrapper but not the nav itself. You can remove widthand margin: 0 autoand try:
您的 HTML 不正确。该<a>标签应该是里面<li>的标签。为了使列表项内联，一套float: left在他们身上，overflow: hidden到<ul>使之适合它的孩子。删除floaton .nav-container，它是不必要的。看看这个代码笔。
当您更改其宽度时，导航会移动，因为它使包装器居中而不是导航本身。您可以删除width，并margin: 0 auto和尝试：
.nav-container {
text-align: center;
}
.nav-container ul {
display: inline-block;
}
回答by Reza Khadjavi
The problem was that you were assigning fixed widths to the li's of 150px.. Instead you should have assign the width to 33% and also assign the width of the ul to 100%, this way, no matter what size the div is, the three li's will be centered perfectly :)
问题是你给 li 的 150px 分配了固定宽度。相反，你应该将宽度分配给 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;
}
回答by ocupocus
The following solution is a bit refined:
下面的解决方案有点精致：
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>
Try it at: http://jsfiddle.net/hg9qvL70/2/
