如何使用HTML和CSS实现14×5规格的Radio Buttons网格

推荐使用CSS Grid实现规整网格布局，无需复杂的布局计算，可直接适配你的Django模板渲染逻辑。

核心代码示例 #

HTML结构 #

<!-- 单选框网格容器，内部直接嵌入你的Django模板循环逻辑生成单选框即可 -->
<div class="radio-grid">
  <!-- 单个单选框结构，循环生成70个即可对应14列×5行的规格 -->
  <div class="radio-cell">
    <input type="radio" name="your-field-name" id="r-1">
  </div>
  <div class="radio-cell">
    <input type="radio" name="your-field-name" id="r-2">
  </div>
  <!-- 剩余单选框结构循环生成即可 -->
</div>

CSS样式 #

.radio-grid {
  display: grid;
  /* 定义14列，可根据实际需求调整每列的最小宽度 */
  grid-template-columns: repeat(14, minmax(30px, 1fr));
  /* 定义5行，统一行高 */
  grid-template-rows: repeat(5, 36px);
  /* 定义行列间距，可自行调整 */
  column-gap: 4px;
  row-gap: 6px;
  justify-items: center;
  align-items: center;
  /* 可选：限制容器最大宽度，避免宽屏下元素过度拉伸 */
  max-width: 860px;
  margin: 10px auto;
}

/* 可选：统一单选框尺寸 */
.radio-grid input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

兼容老旧浏览器备选方案 #

如果需要兼容IE11等不支持CSS Grid的环境，可以使用浮动布局实现：

.radio-grid {
  overflow: hidden;
  max-width: 860px;
  margin: 10px auto;
}
.radio-cell {
  float: left;
  /* 14列等分宽度 */
  width: 7.14%;
  height: 36px;
  box-sizing: border-box;
  padding: 4px 0;
  text-align: center;
}

所有布局逻辑都在CSS侧实现，不会和你的Django模板逻辑产生冲突，直接把循环渲染单选框的代码放到radio-grid容器内即可，不会出现错位或者纵向单列排列的问题。

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