Question

我正在使用＆lt; NAV＆GT;＆LT; UL＆GT;＆LT;李＆GT;做一个菜单。我想把它水平放置并将整个UL放在中心位置，但看起来它不起作用，ul并不是以包装器上的margin-auto为中心

<div id="wrap">
<nav>
<ul>
    <li class="menuitem">Menu</li>
    <li class="menuitem">Menu</li>
    <li class="menuitem">Menu</li>
    <li class="menuitem">Menu</li>
    <li class="menuitem">Menu</li>
</ul>

    .menuitem {
background-color: #E3E3E3;
float: left;
width: 100px;
height: 90px;
list-style-type: none;
text-align: center;
color: black;
display: inline;
}

#wrap {
    margin: 0 auto;
}

以下是fiddle

Answer 1

您应该为.menu-nav提供固定宽度，例如width: 200px;，否则margin: auto无效。

您的text-align: center;课程中也有.menuitem属性。这是文本的中心。如果您不希望文本在菜单中居中，请删除它。

要获得有关css中更高级的居中方法的更多信息，请阅读此blog post about css centering

使用包装器来中心导航ul

1 个答案: