自定义RadioSelect渲染

Question

我正在尝试让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内联，看起来很棒。但现在有一个更大的问题。如上面的截图所示，我有两个选择，是和N / A.现在，如果我点击是或N / A，则选择N / A.我认为这可能是因为它们都具有相同id的跨度，但如果我将其更改为class="radio"，则会发生同样的事情。如果我从CSS中删除float: left，那么它可以正常工作（当然，不会水平显示）。知道是什么导致了这个吗？

Answer 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的div所包围。

然后我有了css：

#radio ul li label{
    display:inline;
}

这使他们排成一行。好，易于。不知道为什么其他方法不起作用，当它听起来像是为另一个SO用户做的时候。