1

我正在尝试创建一个水平 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;     
}
4

2 回答 2

14

试试 CSSnth-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

于 2013-01-17T18:01:49.917 回答
4

我喜欢为此使用浮动 

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/

于 2013-01-17T17:59:53.610 回答