Question

我有一个从数据库返回的列表，每次都可能有不同的大小。该列表使用

加载到html页面<div id="availableTimes"></div>

$.each(returnData.availableTimes, function (index, value) {                        
     $("#availableTimes").append('<input type=radio name=availableTimes value= ' 
        + value.id + '>' + '<label id=' + value.id + '>' + value.time + '</label>');
});

我希望能够做的是将每行显示的单选按钮和标签的数量限制为4.我可以在CSS中设置一个值，还是每4个必须插入一个<br /> JavaScript中的记录？

Answer 1

您可以使用n-child选择器清除每个第5个元素（已浮动）。真的，你可以根据需要打破这一行，只需使用第n个子选择器就可以了......

像这样：

#availableTimes input {
    float:left;
}

#availableTimes input:nth-child(4n + 1) {
    clear:left;
}

编辑：使用（4n + 1）而不是（5n）

Answer 2

没有浮点数，您可以在标签上添加换行符

#availableTimes label:nth-child():after {
    content:"\a";
    white-space: pre;
}

演示：http://jsfiddle.net/8FALp/1/

Answer 3

简短的回答是，您需要每四个记录放一个<br>标记。 AFAIK，没有办法只使用CSS创建换行符。如果你想查看那些

，This SO question还有一些解决方案

限制每行显示的单选按钮

3 个答案: