限制每行显示的单选按钮答案

【问题标题】：Limit Radio Buttons displayed per line限制每行显示的单选按钮
【发布时间】：2013-07-24 04:51:32
【问题描述】：

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

将列表加载到 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？

【问题讨论】：

标签： javascript html css radio-button

【解决方案1】：

简短的回答是，您需要每四条记录放置一个<br> 标记。 AFAIK，没有办法只使用 CSS 创建换行符。 This SO question 有更多的解决方案，如果你想了解这些

【讨论】：

【解决方案2】：

您可以使用 nth-child 选择器来清除每 5 个元素（已浮动）。真的，您可以随意换行，只需使用第 n 个子选择器即可...

像这样：

#availableTimes input {
    float:left;
}

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

编辑：使用 (4n + 1) 而不是 (5n)

【讨论】：

【解决方案3】：

没有浮动，你可以在标签上添加换行符

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

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

【讨论】：