如何在 Django 模板中将我的单选按钮对齐为连续 2 个

Posted 2023-02-24

【中文标题】如何在 Django 模板中将我的单选按钮对齐为连续 2 个

【英文标题】：how can i align my radio button like 2 in a row in Django Template

【发布时间】：2021-07-26 22:53:51

【问题描述】：

% for t in test%
    <label>
        <input type="radio" name="radio" checked/>
        <span class="choice">t.choice</span>
    </label>
% endfor %

这是我打印 n 个单选按钮的代码，我想将它们连续格式化 2 个，但由于我们有一个循环，这变得很困难。我应该怎么做才能在一行中显示 2 个单选按钮。

【参考方案1】：

将循环包装在容器中：

<div class="container">
  % for t in test%
    <label>
        <input type="radio" name="radio" checked/>
        <span class="choice">t.choice</span>
    </label>
  % endfor %
</div>

然后在css中

.container 
  display: flex;
  flex-wrap: wrap;


.container label 
  flex-basis: 50%;

https://codesandbox.io/s/lively-night-d2o1x

【讨论】：

我准备了例子codesandbox.io/s/lively-night-d2o1x

【参考方案2】：

有一种方法可以通过更新视图和模板来解决它。 在视图中将 test 转换为 2 元组列表，如下所示：

test = [(a0, a1), (b0, b1), (c0, c1), ...]

在模板中：

% for t1, t2 in test %
<span class="inline">
    <label>
        <input type="radio" name="radio" checked/>
        <span class="choice">t1.choice</span>
    </label>
    <label>
        <input type="radio" name="radio" checked/>
        <span class="choice">t2.choice</span>
    </label>
</span>
 % endfor %

更新：

您可以使用以下函数将test 打包为二元组列表：

def pack(test):
    new_test = list(zip(test[::2], test[1::2]))
    if len(test) % 2:
        new_test.append((test[-1], None))  # pay attention to None
    return new_test