在将“margin: 0 auto”应用于无序列表、水平导航栏后,我可以将列表元素居中,但列表中包含的项目在列表中左对齐。我在网上看到的例子并没有说明必须重新定位 li 元素,所以我怀疑我做错了什么。我可以看到列表实际上是居中的,因为我在它周围放置了黑色边框,但项目不是。
#navBarList
{
width: 25%;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
border-width: 3px;
border-color: black;
border-style: solid;
}
#navBarList li
{
float: left;
}
---------------------------------
<div id="navBarDiv">
<ul id="navBarList">
<li>Plots</li>
<li>Reports</li>
<li>Map</li>
</ul>
</div>