Question

将“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>

Answer 1

我猜你的意思是给li元素赋予宽度，而不是它包含ul元素。摆脱margin: 0 auto;，除非你想在ul的容器中居中。 list-style-type: none;也应该在li元素上，但我不认为重要~~，因为浮动它们将它们显示为（浮动）块而不是列表项~~。更正的CSS如下：

#navBarList 
{
    overflow: hidden;
    border-width: 3px;
    border-color: black;
    border-style: solid;     
}

#navBarList li 
{
    list-style-type: none;  
    width: 25%;
    float:left;
}

JSFiddle of your example (modified)

如果您打算将文本置于text-align: center;元素中心，则可能还需要将#navBarList li添加到li规则。

编辑：实际上，我可能对列表项有误。将它们浮动在chrome中会使它们不像列表项一样，我正在考虑另一个规则（内联项被浮动为块元素）。不确定那个。

使用保证金后，导航栏/无序列表中的列表项保持左对齐：0 auto

1 个答案: