HTML表单如何将单行10个checkbox调整为每行5个共2行的布局

解决方案 #

你无需修改现有HTML结构，仅需调整CSS代码即可实现需求：

1. 保留原有全局.rc-label样式不变，避免影响单选按钮的布局效果
2. 替换原有CSS中/* Checkboxes */模块的代码为以下内容：

/* Checkboxes */
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px; /* 可自行调整数值修改两行checkbox之间的间距 */
}
/* 仅作用于checkbox区域的选项标签，不会影响单选按钮样式 */
.checkbox-row .rc-label {
  flex: 0 0 20%;
  box-sizing: border-box;
}

实现原理

• flex-wrap: wrap 让弹性容器内的元素超出单行宽度时自动换行，解决了原有10个选项全部挤在同一行的问题
• flex: 0 0 20% 固定每个checkbox标签的宽度为父容器的20%，一行刚好容纳5个选项
• box-sizing: border-box 确保标签的内边距不会撑大宽度，避免布局错乱

内容的提问来源于stack exchange，提问作者Luke