自定义 RadioSelect 渲染答案

【问题标题】：Custom RadioSelect Rendering自定义 RadioSelect 渲染
【发布时间】：2013-07-27 07:44:03
【问题描述】：

我正在尝试使 Django 的 RadioSelect 小部件水平呈现。我发现以下 SO 帖子，我认为已经解决了问题：Align radio buttons horizontally in django forms，它基本上声明使用自定义渲染器，如下所示：

class HorizontalRadioRenderer(forms.RadioSelect.renderer):
  def render(self):
    return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))

class MyForm(ModelForm):
    select=forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect(renderer=HorizontalRadioRenderer

但是当我实现这个时，我仍然会得到垂直渲染的单选按钮。这是一个屏幕截图。

这对我的表单来说是一个严重的问题。知道为什么它不能正常工作吗？如果重要，表格将呈现在表格中。

谢谢

更新：

好的，我尝试了其他方法。渲染器现在是：

def render(self):
    internal=''.join(['<span id="radio">%s</span>' % w for w in self])
    return mark_safe(u'%s' %internal)

我已将 CSS 添加到我的样式表中：

#radio{
   width: 100px;
   float: left;
}

这使得 RadioBoxes 内联，并且 看起来 很棒。但现在有一个更大的问题。如上面的截图所示，我有 2 个选择，Yes 和 N/A。现在，如果我单击是或 N/A，则选择 N/A。我认为这可能是因为它们都在具有相同 id 的 span 中，但是如果我将其更改为 class="radio" 会发生同样的事情。如果我从 CSS 中删除 float: left，那么它可以正常工作（当然，它不会水平显示）。知道是什么原因造成的吗？

【问题讨论】：

它很可能只是由于表格单元格而崩溃。您应该查看 HTML 并弄清楚发生了什么。您在这里猜测太多了..渲染器是否正常工作？如果是，那还剩下什么？
@Yuji'Tomita'Tomita 看起来不像是表格单元格......我只是自己渲染它，它正在做同样的事情。渲染器正在“工作”（我的意思是，如果我更改渲染器，则会应用它的影响），但似乎并没有按照我的意愿去做。更多信息会有帮助吗？如果有，是什么？

标签： django forms radio-button

【解决方案1】：

哇：好的。

仍然不确定为什么让它们具有相同的 id 或类会导致它们表现为同一个单选框，但我想出了一个解决方案。

渲染器现在如下所示：

def render(self):
    internal = ''.join(['<li>%s</li>' % w for w in self])
    return mark_safe(u'<div id="radio"><ul>%s</ul></div>' %internal)

这使得单选框成为一个无序列表，被一个 id 为 radio 的 div 包围。

然后我有css：

#radio ul li label{
    display:inline;
}

这会将它们排成一行。好，易于。不知道为什么另一种方法不起作用，当它听起来像是对另一个 SO 用户起作用时。

【讨论】：