javascript - 限制每行显示的单选按钮

标签 javascript html css radio-button

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

最佳答案

您可以使用第 nth-child 选择器清除每第 5 个元素(已 float )。真的,你可以随心所欲地打破这一行,只需使用第 n 个子选择器来这样做......

像这样:

#availableTimes input {
    float:left;
}

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

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

关于javascript - 限制每行显示的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17838644/

相关文章:

javascript - 如何缩放 anime.js 运动路径函数的 SVG 路径?

javascript - 将变量绑定(bind)到 Angular Js 中的已编译元素

javascript - 通过 bootstrap 使用 jquery popover 进行 Rails CRUD

css - 是否可以使用 CSS 从 div 中切出三 Angular 形部分?

html - 不包括特定类的第 n 个子计数器

javascript - Javascript 和 Flash/ActionScript 之间的交互无需外部接口(interface)?

javascript - highcharts 3d 列 - 显示 "beta axis title"和 "beta axis label"

javascript - Twitter 列表未显示正确推文的问题

html - 更改移动 megamenu 下拉菜单的背景颜色

css - IE中select的背景 left if right