0

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

1 回答 1

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（已修改）

如果您打算使文本在元素中居中，您可能还需要添加text-align: center;到规则中。#navBarList lili

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

于 2012-08-19T03:12:36.870 回答