CSS中心对齐ul列表

Question

我的网站上有一个<ul>列表，其中包含一些子菜单。它的结构是这样的：

<div id="cssmenu">
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>RNG</span></a>
      <ul>
         <li><a href='#'><span>menu 1</span></a></li>
         <li><a href='#'><span>menu 1</span></a></li>
         <li class='last'><a href='#'><span>menu 1</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Altro</span></a>
      <ul>
         <li><a href='#'><span>kldajofa</span></a></li>
         <li class='last'><a href='#'><span>Altro12</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

我有4 <li>你可以看到，我希望看到它们与屏幕的宽度居中对齐，但我不知道该怎么做。

您可以在此处看到包含CSS的fiddle。如何将我在菜单上的名字对齐？

Answer 1

假设只有4 li - 如示例所示，请设置width:25%。

Working jsFiddle here

#cssmenu li {
    float: left;
    padding: 0px;
    width: 25%;
}

我做了一个小更新，以便子导航菜单项也是25％..

jsFiddle here

设置为width:225px;。

#cssmenu li ul {
    width: 25%;
}

Answer 2

考虑到您只有4个菜单项，您只需添加：

#cssmenu > ul > li { width:25%; }

这会将列表项的宽度设置为25％。由于a设置为显示为块，因此它们将适合li的整个宽度。

注意我们正在使用直接子选择器>，因为我们不希望将此效果应用于子菜单中的菜单li。我们只需要在根级别上有这种效果。

其他可能的解决方案是使用尚未得到良好支持的flexbox，如果没有填充，则无法使用。

Answer 3

如果li为display:inline-block，您可以将text-align:center应用于ul，并且无论号码是多少，列表项都会居中（前提是线路上有空间）。

好消息是没有清算问题。

JSFiddle

Answer 4

我刚刚为li添加了宽度，现在可以正常工作。

检查JsFiddle

#cssmenu li a {
  background: #0D0D0D bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
    width:70px;
}