如何实现Django表单指定CharField字段在同一行并排显示

注意：你贴的代码中__init__方法里super调用的类名写的是MetadataForm，和你定义的ExampleForm不匹配，运行会报错，下面的示例代码已经修正这个笔误。

你之前用浮动的方案出现排版错乱，核心原因是浮动会让元素脱离正常文档流，且你只给input加了浮动，label仍在正常文档流中单独占位，必然会出现布局错位。推荐用弹性布局（Flex）实现需求，不需要单独给label加id定位，布局稳定无错乱，默认所有字段单独占一行，仅指定字段同行展示。

方案1：原生Django模板渲染 + Flex布局（无额外依赖，最推荐） #

第一步：修改Form类，给字段添加基础样式类 #

class ExampleForm(forms.Form):
    example_1 = forms.CharField(max_length=20, required=False)
    example_2 = forms.CharField(max_length=20, required=False)
    example_3 = forms.CharField(max_length=20, required=False)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 单独占行的字段配置
        self.fields['example_1'].widget.attrs['class'] = 'form-input'
        self.fields['example_1'].widget.attrs['style'] = 'width:15%;'
        # 需要同行展示的字段配置
        self.fields['example_2'].widget.attrs['class'] = 'form-input'
        self.fields['example_2'].widget.attrs['style'] = 'width:15%;'
        self.fields['example_3'].widget.attrs['class'] = 'form-input'
        self.fields['example_3'].widget.attrs['style'] = 'width:15%;'

第二步：模板中给同行字段包裹弹性容器 #

不要直接用{{ form.as_p }}这种整表渲染方法，手动拆分字段渲染，把需要同行的字段放在同一个flex容器里：

<form method="post">
    {% csrf_token %}
    <!-- 单独占行的字段 -->
    <div class="form-row">
        {{ form.example_1.label_tag }}
        {{ form.example_1 }}
    </div>
    <!-- 需要同行的字段组，包裹在inline-group容器中 -->
    <div class="form-row inline-group">
        <div class="inline-field">
            {{ form.example_2.label_tag }}
            {{ form.example_2 }}
        </div>
        <div class="inline-field">
            {{ form.example_3.label_tag }}
            {{ form.example_3 }}
        </div>
    </div>
    <button type="submit">提交</button>
</form>

第三步：编写CSS样式 #

/* 默认每行单独占块，上下留间距 */
.form-row {
    display: block;
    margin-bottom: 16px;
    width: 100%;
}
/* 同行组开启flex布局，横向排列子元素 */
.inline-group {
    display: flex;
    gap: 100px; /* 控制两个同行字段的间距，替代margin */
    align-items: flex-start;
}
/* 每个同行字段项，label在上input在下 */
.inline-field {
    display: flex;
    flex-direction: column;
}
/* 统一输入框样式 */
.form-input {
    margin-top: 4px;
    padding: 4px 8px;
    box-sizing: border-box;
}

这个方案下，后续如果要加其他单独占行的字段，直接放在新的.form-row容器里即可；要加同行的字段，就在.inline-group里新增.inline-field项，维护成本极低。

方案2：借助django-widget-tweaks简化字段属性配置 #

如果你不想在后端Form类里硬写样式属性，可以安装django-widget-tweaks插件，直接在模板里给字段、label添加属性，不需要修改后端代码：

1. 安装并注册插件：

pip install django-widget-tweaks

# settings.py 中注册app
INSTALLED_APPS = [
    # 其他内置app
    'widget_tweaks',
]

2. 模板中直接渲染配置属性，CSS和方案1完全一致：

{% load widget_tweaks %}
<form method="post">
    {% csrf_token %}
    <div class="form-row">
        {{ form.example_1.label_tag }}
        {% render_field form.example_1 class="form-input" style="width:15%;" %}
    </div>
    <div class="form-row inline-group">
        <div class="inline-field">
            {{ form.example_2.label_tag }}
            {% render_field form.example_2 class="form-input" style="width:15%;" %}
        </div>
        <div class="inline-field">
            {{ form.example_3.label_tag }}
            {% render_field form.example_3 class="form-input" style="width:15%;" %}
        </div>
    </div>
</form>

原有浮动方案的问题说明 #

• 浮动元素会脱离正常文档流，父元素没有清除浮动的话会出现高度塌陷，后续元素会错位上移
• 仅给input加浮动时，label作为块级元素仍会单独占满一行，无法和对应的input绑定成整体排列
• 浮动布局需要额外处理清除浮动、边距重叠等问题，现在表单排版优先用Flex布局，逻辑更直观，兼容性也足够覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者John Green