Javascript 尝试将许多单选按钮显示为列-获得奇怪的输出

我有一个包含许多单选按钮的

div

。我想要一种方法：一列中只显示4个单选按钮，然后在下一列中显示下4个单选按钮，依此类推

从我的搜索中，我找到了以下方法：

.mdl收音机{
显示：块；
利润率：15px自动；
}
.mdl电台，
。选择邮件标题{
利润率：25px；
}
.单选按钮容器{
高度：100vh；
-webkit列数：3；
-moz列数：3；
列数：3；
}
label.mdl-radio{
显示：内联块；
}

萨查
上下快速移动
马利
精明的
艾米
波比
知情人
教条
吵闹的
白蛋白
唐娜
伊莱
玫瑰

检查此项

您只需要指定列中的项数

.radiobuttons-container {
    height:100vh;
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
}

---

您可以简单地使用表结构。每个包含4个，每个包含一个单选按钮。您的

列计数
css解决方案无法完美工作，因为一列中的项目数量取决于容器大小。容器越大，每列的项目就越少。要修复标签的奇怪对齐，您可以为标签设置一些固定的宽度，即
label.mdl-radio{width:100px}
，如上所述，一列中需要4个radio。目前共有13个电台，分为4个栏目。增加他们，你会有更多。