如何让Django的RadioSelect单选框选项实现每行两列等距布局

不需要修改现有的Forms.py和views.py代码，直接调整模板代码并添加CSS样式即可实现需求。

方案1：纯CSS实现（最简方案） #

首先修正模板中重复id的问题（同一页面id不能重复，将重复的id="checkbox"改为类名），再添加CSS控制布局：

修正后的searchpage.html代码 #

<form method="post" action="SearchDisplay" id="searchFilter">
<!-- 自定义样式，可写在单独CSS文件中 -->
<style>
.radio-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 两列等宽布局 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 行列间距，可根据需求调整数值 */
  gap: 12px 24px;
  margin-bottom: 20px;
}
.radio-group li {
  margin: 0;
  display: flex;
  align-items: center;
}
</style>

<div class="radio-group">
    <ul>
        {{ form.dress }}
    </ul>
</div>

<div class="radio-group">
    <ul>
        {{ form.color}}
    </ul>
</div>
</form>

如果需要兼容旧版浏览器，可替换为Flex布局实现：

.radio-group ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.radio-group li {
  width: 48%; /* 预留间距空间，可自行调整 */
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

方案2：手动循环渲染选项（更灵活） #

如果需要对单个单选按钮做更精细的自定义控制，可在模板中手动循环输出每个选项：

<div class="radio-group">
  <ul>
    {% for radio in form.dress %}
    <li>
      <label for="{{ radio.id_for_label }}">
        {{ radio.tag }} {{ radio.choice_label }}
      </label>
    </li>
    {% endfor %}
  </ul>
</div>

配合上述CSS样式即可实现相同的布局效果，同时支持自定义每个选项的DOM结构。

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