css - 第一行居中，第二行居中

Question

我有一个包含两到五个元素的 li，具体取决于页面的呈现方式。我希望第一个出现在一行中，居中，然后其余的出现在下一行的中心。

 -----------------
|                 |
|       ONE       |
|  TWO THREE FOUR |
|                 |
 -----------------

我已将第一个放在我想要的位置，但我无法让第二行的那些移动。

这是我的 fiddle :http://jsfiddle.net/dkzxfcb0/

如果可能的话，我想完全摆脱包装 div，但它在我的优先级列表中排得很靠后。

Answer 1

在父级ul元素上添加text-align: center，然后让所有的子级li元素都成为inline-block 。将第一个 child 设置为 display: block 以将其放在单独的行上。

Updated Example

ul {
  list-style: none;
  padding-left: 0;
  text-align: center;
}
li {
  margin-right: 5px;
  display: inline-block;
}
li:first-child {
  display: block;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>