限制每行显示的单选按钮

Limit Radio Buttons displayed per line

本文关键字：单选按钮 显示      更新时间：2023-09-26

我有一个从数据库返回的列表，每次都可能是不同的大小。使用将列表加载到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中设置的值，或者我必须在JavaScript中每4条记录插入一个<br />？

您可以使用第n个子选择器来清除每5个元素（已浮动）。真的，你可以随心所欲地换行，只需使用第n个子选择器即可…

像这样：

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

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

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

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

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

简单的答案是，您需要每四条记录放置一个<br>标记。AFAIK，没有办法只使用CSS来创建换行符。如果你想研究

，这个SO问题还有一些解决方案
相关文章：