Django ModelFormSet字段CSS对齐求助：文本框与输入框同高同行

刚接触CSS，使用Django的modelformset_factory生成包含TextArea和TextInput的表单集，想要每个表单的所有字段保持相同高度并对齐在同一行，可按以下方案操作：

1. 编写CSS统一布局与高度 #

直接给表单容器和输入框设置样式，强制实现同行对齐与高度统一：

/* 单个表单的容器，用flex布局强制字段同行 */
.formset-item {
  display: flex;
  align-items: stretch; /* 让子元素自动撑满容器高度 */
  gap: 12px;
  margin-bottom: 16px;
}

/* 统一TextInput和TextArea的高度与盒模型 */
.formset-item input[type="text"],
.formset-item textarea {
  height: 75px; /* 可根据需求调整高度 */
  box-sizing: border-box; /* 避免内边距额外增加元素高度 */
  padding: 8px 10px;
  resize: none; /* 禁止拖动调整textarea大小，可选 */
  flex: 1; /* 字段平分容器宽度，按需调整比例 */
}

/* 覆盖Django默认表单组的边距样式 */
.formset-item .form-group {
  margin: 0;
  flex: 1;
}

2. 模板中为表单添加容器类 #

渲染表单集时，给每个表单包裹formset-item类的容器：

{% for form in formset %}
  <div class="formset-item">
    <!-- 快速渲染所有字段 -->
    {{ form.as_p }}
    <!-- 必须保留隐藏的id字段，否则表单集提交会出错 -->
    {{ form.id }}
  </div>
{% endfor %}

如果需要更精准控制字段布局，推荐手动渲染字段：

{% for form in formset %}
  <div class="formset-item">
    <div>{{ form.your_textinput_field }}</div> <!-- 替换为你的TextInput字段名 -->
    <div>{{ form.your_textarea_field }}</div> <!-- 替换为你的TextArea字段名 -->
    {{ form.id }}
  </div>
{% endfor %}

关键说明 #

• align-items: stretch是实现同高的核心，能让flex容器内的所有子元素自动匹配最高元素的高度
• box-sizing: border-box必须添加，否则输入框的内边距和边框会让实际高度超出设置值
• 若需要不同宽度的字段，可调整flex属性值，比如给TextArea设flex: 2、TextInput设flex:1，实现宽度比例分配

内容的提问来源于stack exchange，提问作者Ramy Khalil