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的小提琴 。 如何將我在菜單上的名字對齊？

Answer 1

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

在這里工作jsFiddle

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

我做了一個小的更新，以便子導航菜單項也是25％..

jsFiddle在這里

設定width:225px; 。

#cssmenu li ul {
    width: 25%;
}

Answer 2

考慮到您只有4個菜單項，您只需添加：

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

這會將列表項的寬度設置為25％。 並且由於a被設置為顯示為塊，因此它們將適合li的整個寬度。

請注意 ，我們使用的是直接子選擇器> ，因為我們不希望這樣的效果施加到菜單都li子菜單里面秒。 我們只需要在根級別上有這種效果。

其他可能的解決方案是使用flexbox ，該flexbox尚未得到良好支撐，並且不能在沒有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;
}