1

我正在尝试使 Django 的 RadioSelect 小部件水平呈现。我发现了以下 SO 帖子，我认为它已经解决了问题：在 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 的跨度中，但是如果我将其更改为class="radio"相同的事情会发生。如果我float: left从 CSS 中删除，那么它可以正常工作（但当然不会水平显示）。知道是什么原因造成的吗？

4

1 回答 1

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 用户起作用时。

于 2013-07-29T15:09:59.893 回答