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 example

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

有关nth-child的详情，请参阅https://developer.mozilla.org/en-US/docs/CSS/:nth-child

Answer 2

我喜欢使用float来实现这个

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

ul.items li
{
    float: left; 
    display: inline;     
}

.clear { clear: both; }

使用这个html：

<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>
  <li class="clear"></li>
</ul>

在这里演示：http://jsfiddle.net/hG3Us/

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

2 个答案: