如何创建一个水平UL,每行显示3个项目？

Question

我正在尝试创建一个水平UL,每行总共显示3个项目.棘手的部分是物品的宽度可以不同.例如:

<ul class="items">
  <li>
   <input type="checkbox" id="work" />
    Work items
   </li>
  <li>
   <input type="checkbox" id="shopping" /> 
    Shopping
    </li>
  <li>
   <input type="checkbox" id="financial" />
    Financial Information & Tips
    </li>
</ul>

等等

我想这样做,所以它基本上就像使用一个表,每行总是显示3个项目,每个项目的复选框始终与文本在同一行.

我该怎么做？

这是我正在使用的当前代码,但它没有均匀显示项目,通常最后一个复选框在第1行结束,文本被推送到下一行.

ul.items
{
  text-align: center; 
  list-style-type: none;  
  width: 400px;
}

ul.items li
{
    display: inline;     
}

Answer 1

尝试CSS nth-child选择器.无论宽度如何都可以工作.

我也删除了你的display:inline规则并将其替换为float:left;.

jsFiddle例子

ul.items li:nth-child(3n+4) {
  clear:left;
  float:left;
}

有关详细信息nth-child,请参阅https://developer.mozilla.org/en-US/docs/CSS/:nth-child