Question

我有一个2到5个元素的li，具体取决于页面的呈现方式。我希望第一行显示在一行上，居中，然后其余的那些以下一行为中心。

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

我已经得到了我想要的第一个，但我无法让第二行的那些移动。

这是我的小提琴：http://jsfiddle.net/dkzxfcb0/

如果可能的话，我想完全摆脱包装div，但这在我的优先级列表中非常低。

Answer 1

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

Updated Example

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

加你李：

  display: inline-block;
  width: 33.333%

和li：nth-child（1）

  width: 100%;

这应该有效

Answer 3

我可以问你为什么要使用一个列表来构建更像表格的东西吗？

这样的工作：

<table>
  <tr>
    <th colspan="3">One</th>
  </tr>
  <tr>
    <td>Two</td>
    <td>Three</td> 
    <td>Four</td>
  </tr>
</table>

Answer 4

您可以在display: table;上使用ul并制作li元素display: inline-block;。 li:first-child应为display: block;以推送其他li元素。

<强> My fiddle

<强> CSS

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

将第一个li放在一条线上，在第二条线上保留lis

4 个答案: