javascript - Limit Radio Buttons displayed per line

Question

I have a list being returned from a database that can potentially be a different size each time. The list is loaded onto a html page <div id="availableTimes"></div> using

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

What I would like to be able to do is limit the amount of radio buttons and labels displayed per line to 4. Is there a value I can set in CSS or do I have to insert a <br /> every 4 records in the JavaScript?

Answer 1

You could use nth-child selectors to clear every 5th element (that has been floated). Really, you can break the line however you want, just use the nth-child selector to do so...

Like so:

#availableTimes input {
    float:left;
}

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

EDIT: use (4n + 1) rather than (5n)

Answer 2

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

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

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

Answer 3

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