正文 

当前位置： 首页 > 问答 >

在 Django 表单中水平对齐单选按钮

     2023-03-05     278

关键词：

【中文标题】在 Django 表单中水平对齐单选按钮【英文标题】：Align radio buttons horizontally in django forms 【发布时间】：2011-08-21 14:08:12 【问题描述】：

嗨

我想水平对齐单选按钮。默认情况下，django 表单以垂直格式显示。 

feature_type  = forms.TypedChoiceField(choices = formfields.FeatureType, widget = forms.RadioSelect)

是否有任何特殊参数可以传递给单选按钮对齐？

提前致谢

【问题讨论】：

我认为这比 Django 更像是一个 CSS 问题。您也许可以向单选按钮添加一个类并说 float:left;在单选按钮类的 CSS 中。 我用谷歌搜索了它，我发现了一个我无法使它工作的链接。 wikis.utexas.edu/display/~bm6432/…。我将尝试添加 css 并让您知道它是否修复。谢谢极客 【参考方案1】：

这就是RadioField 的行为。如果您希望它水平渲染，请创建一个水平渲染器，如下所示：

from django.utils.safestring import mark_safe

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


class ApprovalForm(forms.Form):
    approval = forms.ChoiceField(choices=APPROVAL_CHOICES,
                 initial=0,
                 widget=forms.RadioSelect(renderer=HorizontalRadioRenderer),
                                 )

【讨论】：

嘿 lakshman，当我执行上面的代码时，它的错误 mark_safe 没有定义。如果您能提供帮助，那将是很大的帮助 你应该从 Django.templates 导入它 冷却它的工作正常 laxman。感谢您的帮助 :-) 我导入的 mark_safe 可以正常工作：from django.utils.safestring import mark_safe 从 Django 1.11 开始，这给了我forms.RadioSelect.renderer 的错误：“type object 'RadioSelect' has no attribute 'renderer'”。 我得到了同样的错误“类型对象'RadioSelect'没有属性'renderer'”。请帮助【参考方案2】：

另一个出路是将ul->li列表的样式改为display:inline-block。你可以做这样的事情

 <style>
 ul#youelementId li
  display: inline-block;
  
</style>

希望这对下一位读者有所帮助。

【讨论】：

在 Django 3.1.4 中对我有用的唯一方法【参考方案3】：

我想出了一个替代解决方案。如果您使用引导程序呈现表单，则可以将 .form-check-inline 类添加到输入中，该字段将水平显示。下面列出的是显示我所描述内容的代码。我希望这可以帮助某人重新发明***。谢谢阅读。保重，度过美好的一天。

                feature_type = forms.MultipleChoiceField(
                required=False,
                ...
                widget=forms.CheckboxSelectMultiple(attrs='class': 'form-check-inline')
                )

【讨论】：

这是一个非常好的和干净的解决方案。 关闭required (=False) 的必要性是什么？【参考方案4】：

在我的 Django 2.2.6 上面的解决方案上效果不佳，所以我在多次尝试后发布我的解决方案，并按照面包屑导航，直到使用 django 表单小部件模板。

我必须重写 2 个模板，继承我自己的小部件类，然后指向它。

修改后的默认django模板为：

django/forms/templates/django/forms/widgets/input_option.html django/forms/templates/django/forms/widgets/multiple_input.html

现在他们是：

PROJECT_NAME/PROJECT_APP/templates/admin/horizo​​ntal_option.html

% if widget.wrap_label %<label% if widget.attrs.id % for=" widget.attrs.id "% endif % class="radio-inline">% endif %% include "django/forms/widgets/input.html" %% if widget.wrap_label %  widget.label </label>% endif %

PROJECT_NAME/PROJECT_APP/templates/admin/horizo​​ntal_radios.html

% with id=widget.attrs.id %<ul% if id % id=" id "% endif %% if widget.attrs.class % class=" widget.attrs.class "% endif %>% for group, options, index in widget.optgroups %% if group %
  <li> group 
    <ul% if id % id=" id _ index "% endif %>% endif %% for option in options %
    % include option.template_name with widget=option %% endfor %% if group %
  </ul></li>% endif %% endfor %
</ul>% endwith %
第一个包含一个硬编码的类：class="radio-inline" at labels，默认情况下 Django 什么都没有 第二个是无线电组的呈现，我删除了它们在内部 ul 标记中呈现的额外 HTML li 标记。

然后你需要创建自己的小部件类：

from django.forms import RadioSelect


class HorizontalRadioSelect(RadioSelect):
    template_name = 'admin/horizontal_radios.html'
    option_template_name = 'admin/horizontal_inputs.html'

最后，在我的例子中，我指出它覆盖了我的管理员中的 formfield_overrides 类属性。但我认为你也可以在你的模型中做到这一点：

    formfield_overrides = 
        models.BooleanField: 'widget': HorizontalRadioSelect(choices=[(True, "Yes"), (False, "No"), (None, "Unknown")],),

【讨论】：

这是 Django 2.0+ 版本的正确解决方案，谢谢！【参考方案5】：

修改后的表格。RadioSelect：

class HorizontalRadioSelect(forms.RadioSelect):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        css_style = 'style="display: inline-block; margin-right: 10px;"'

        self.renderer.inner_html = '<li ' + css_style + '>choice_valuesub_widgets</li>'

使用 Django 1.10 的标准管理员在 Python 3.4 上工作

和 Django-Suit(http://djangosuit.com/)（它使用 Bootstrap 的 2 种样式）

尚未针对 Django-grappelli 进行测试。

【讨论】：

此答案并不直接适用于用户提供的示例代码，因此无法回答他们的问题。【参考方案6】：

根据the Django docs 'attrs' 是一个字典，其中包含要在呈现的小部件上设置的 HTML 属性。

考虑到这一点，一个简单的基于表单的解决方案将类似于以下内容：

feature_type  = forms.TypedChoiceField(
    choices = formfields.FeatureType,
    widget = forms.RadioSelect(attrs=
        'style': 'display: inline-block'
    )
)

【讨论】：

没有“display”属性，应该是"style": "display: inline-block"，这样就不行了。 display: inline-block 将应用于单选按钮，而不是 &lt;li&gt;【参考方案7】：

实际上不需要在管理中覆盖小部件、模板或其他任何东西。至少从 2008 年开始（参见forms.css），最简单的方法是传递一个类属性inline：attrs='class': 'inline'

在自定义表单中，它可能如下所示：

field = forms.ChoiceField(choices=(('1', 'one'), ('2', 'two')),
                          widget=forms.RadioSelect(attrs='class': 'inline'))

……它对复选框的工作原理完全相同：

field = forms.MultipleChoiceField(choices=(('1', 'one'), ('2', 'two')),
                                  widget=forms.CheckboxSelectMultiple(attrs='class': 'inline'))

对于表单字段覆盖，它应该是相同的，通过 ModelAdmin formfield_overrides 或 formfield_for_* 函数。

【讨论】：

【参考方案8】：

作为 renerer 为我提出此错误：

AttributeError：类型对象“RadioSelect”没有属性“renderer”

我想出了这个代码：

<form method="post">
    % csrf_token %
    % for question in form %
        <p> question.label : </p>
        % for choice in question %
             choice 
        % endfor %
    % endfor %
    <br><br>
    <button type="submit">
            submit
    </button>

</form>

【讨论】：

【参考方案9】：

您可以使用这种方法。在我看来，这是最简单的

class YourAdminForm(forms.ModelForm):

    class Meta:
        model = models.YourModel
        widgets = 
            "your_field": forms.RadioSelect(attrs="class": "inline"),

或者像这样定义你的字段

    your_field = forms.ChoiceField(
        choices=(...),
        widget=forms.RadioSelect(attrs="class": "inline"),
    )

【讨论】：

如何让输入单选元素在反应 [material-ui] 中水平对齐？

】如何让输入单选元素在反应[material-ui]中水平对齐？【英文标题】：HowcanIgetinputradioelementstohorizontallyaligninreact[material-ui]?【发布时间】：2016-02-1407:00:09【问题描述】：radio组始终在material-ui中垂直列出。有没有办法水平对齐它们... 查看详情

在 matplotlib 中水平显示单选按钮

】在matplotlib中水平显示单选按钮【英文标题】：DisplayingRadiobuttonshorizontallyinmatplotlib【发布时间】：2019-08-0108:51:14【问题描述】：我正在使用matplotlib.widgets在我的小部件中创建单选按钮，即将出现的按钮垂直堆叠，我希望它们水... 查看详情

如何使用大小类和自动布局在 Xib 中水平对齐两个 UI 按钮

】如何使用大小类和自动布局在Xib中水平对齐两个UI按钮【英文标题】：HowtoAlignTwoUIButtonHorizontallyAlignedinAXibUsingSizeClassandAutoLayout【发布时间】：2015-09-1506:50:17【问题描述】：如何使用SizeClass和AutoLayout在Xib中水平对齐两个UI按钮。... 查看详情

在材料设计中水平对齐元素

】在材料设计中水平对齐元素【英文标题】：horizontallyalignelementsinmaterialdesign【发布时间】：2016-03-0106:48:26【问题描述】：我有一个包含两个组件的简单工具栏：一个h1和一个菜单按钮。我希望h1居中在工具栏和左侧的菜单按钮。... 查看详情

如何在 PagedGridView 中水平对齐中心的加载图标？

】如何在PagedGridView中水平对齐中心的加载图标？【英文标题】：HowtoalignloadingiconatcenterhorizontallyinPagedGridView?【发布时间】：2021-12-1309:04:01【问题描述】：我正在尝试使用无限滚动在PagedGridView中显示新闻项目，以一次加载有限数... 查看详情

如何在反应中水平对齐2行？

】如何在反应中水平对齐2行？【英文标题】：Howtoalign2rowshorizontallyinreact?【发布时间】：2021-08-2502:47:45【问题描述】：我正在制作一个反应应用程序，我有几列要映射到值，我想用字段值水平映射字段名称。我尝试使用下面的代... 查看详情

如何在 PyQt5 中水平对齐中心图像？

】如何在PyQt5中水平对齐中心图像？【英文标题】：HowdoIaligncentreimagehorizontallyinPyQt5?【发布时间】：2021-08-1209:58:13【问题描述】：我正在做我的大学项目，我想将图像水平居中对齐，我尝试了很多方法但没有找到解决方案。这是... 查看详情

在 React 中水平方向对齐图像和文本

】在React中水平方向对齐图像和文本【英文标题】：AlignImageandTextinHorizontalDirectioninReact【发布时间】：2020-11-0516:59:41【问题描述】：我正在尝试在下图中实现这样的效果。现在，我的图片在顶部，而文字在下方。我想实现文本就... 查看详情

VBA Excel在多行中水平对齐图片

】VBAExcel在多行中水平对齐图片【英文标题】：VBAExcelAlignPicturesHorizontallyinMultipleRows【发布时间】：2020-11-2713:44:47【问题描述】：从我尝试修改的一些示例VBA代码中，我的目标是使用VBA学习Excel，并希望获得指导以水平对齐图片，... 查看详情

如何在tailwind-css中水平对齐图像

】如何在tailwind-css中水平对齐图像【英文标题】：HowcanIalignimagehorizontallyintailwind-css【发布时间】：2021-07-0821:30:54【问题描述】：我在使用tailwind-css将图像与网格的子div内的右侧对齐时遇到了困难。我试过float-right、right-0等，但... 查看详情

css在一个div中水平+垂直对齐3个元素

】css在一个div中水平+垂直对齐3个元素【英文标题】：cssalignhorizontally+vertically3elementswihinadiv【发布时间】：2012-04-0305:42:38【问题描述】：我正在尝试在div中为一系列3个元素设置我自己的距离：1)一个复选框2)一张图片3)一段文字... 查看详情

如何在 extjs4.1 中水平对齐组合框

】如何在extjs4.1中水平对齐组合框【英文标题】：Howtoaligncomboboxhorizontalinextjs4.1【发布时间】：2013-07-0513:45:37【问题描述】：谁能告诉例如组合1组合2组合3combo4combo5combo6谢谢【问题讨论】：【参考方案1】：您可以使用Hbox布局来实... 查看详情

使用 VBA 宏在 Word 中水平对齐（分布）图像

】使用VBA宏在Word中水平对齐（分布）图像【英文标题】：Align(distribute)imageshorizontallyinWordwithVBAmacro【发布时间】：2021-05-3007:48:26【问题描述】：这是我第一次在VBA中编写宏。我的目标是编写一个VBA宏，它将自动对齐（分布）Word... 查看详情

在 extjs 中水平管理底部的最小化窗口而不是重叠

】在extjs中水平管理底部的最小化窗口而不是重叠【英文标题】：Mangeminimizedwindowsatbottomhorizontallyinextjsratherthanoverlapping【发布时间】：2015-01-2918:12:19【问题描述】：我正在使用Extjs处理多个最小化窗口。当我单击最小化按钮时，... 查看详情

如何在 Laravel 微风中的 tailwind-css 中水平对齐图像

】如何在Laravel微风中的tailwind-css中水平对齐图像【英文标题】：HowcanIalignimagehorizontallyintailwind-cssinLaravelbreeze【发布时间】：2022-01-1121:51:03【问题描述】：我正在尝试将一个omg与文本对齐，但标签&lt;p&gt;打破了这一行。我... 查看详情

在默认 Django 表单中添加单选按钮：

】在默认Django表单中添加单选按钮：【英文标题】：AddRadiobuttonindefaultDjangoform:【发布时间】：2020-12-2316:51:24【问题描述】：我认为我编写了正确的代码。但是这个性别单选按钮没有出现在我的表单中。这是我的模型视图。classCha... 查看详情

Bootstrap 3中水平对齐缩略图到中心

】Bootstrap3中水平对齐缩略图到中心【英文标题】：HorizontalalignthumbnailstocenterinBootstrap3【发布时间】：2013-08-2523:50:34【问题描述】：我试图让3个缩略图水平并排并居中。这些的问题是它们没有居中。我也想知道我是否可以简化代... 查看详情

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

】如何在Django模板中将我的单选按钮对齐为连续2个【英文标题】：howcanialignmyradiobuttonlike2inarowinDjangoTemplate【发布时间】：2021-07-2622:53:51【问题描述】：%fortintest%<label><inputtype="radio"name="radio"checked/><spanclass="choice">t.ch... 查看详情