在DIV中居中无序列表 [英] Center unordered list in DIV
问题描述
首先，我知道这个问题已经问了一个百万次...我看过这一个具体以及在本网站和其他网站上的其他几个。我已经尝试了大量不同的变化，在每个这些，仍然不能让它工作。
First of all, I know this question has been asked a MILLION times...and I've looked at this one specifically as 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.
我试图集中一个无序的列表。它正确显示，它只是不居中。目前，它是关闭到中心...但如果你改变CSS中的.nav-container代码中的width参数，那么它会移动div的位置。
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：
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中查看它，因为我正在测试它。
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.
推荐答案
您的HTML不正确。 < a> 标签应位于< li> 标签内。要使列表项成为内联，请在其上设置 float：left ，并将 overflow：hidden 设置为< ul> 所以它适合自己的孩子。删除 .nav-container 上的 float ，它的不必要的。请查看此代码。
当您更改其宽度时，导航会移动，因为它中心的包装，但不是导航本身。您可以移除宽度和 margin：0 auto ，然后尝试：
Your HTML is incorrect. The <a> tags should be inside the <li> tags. To make the list items be inline, set float: left on them, and overflow: hidden to the <ul> so it fits its children. Remove the float on .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 width and margin: 0 auto and try:
.nav-container {
text-align: center;
}
.nav-container ul {
display: inline-block;
}
这篇关于在DIV中居中无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
