Django表单小部件文本垂直对齐问题：多行输入框无法顶端对齐

你的问题核心有两个关键点，我来一步步帮你排查和解决：

1. 用错了输入控件类型 #

你当前给content字段用的是forms.TextInput，这是单行文本输入框，不管怎么设置vertical-align，它都只会显示一行内容——你看到的“垂直居中”其实是表格单元格的默认对齐效果，而非输入框内文本的对齐。

多行输入应该使用forms.Textarea控件，这才是Django专门用来处理多行文本输入的组件。

2. 表格单元格的默认对齐干扰 #

HTML表格的<td>元素默认vertical-align值是middle，哪怕你修正了输入控件，整个输入框在单元格里还是会垂直居中，所以需要调整对应单元格的对齐属性。

修改后的代码示例 #

表单代码（models.py/forms.py）

from django import forms
from datetime import date

class FeedbackForm(forms.ModelForm):
    submitter = forms.CharField(max_length=100, help_text="Name")
    sub_email = forms.EmailField(help_text="E-Mail Adresse (wird nicht veröffentlicht.)")
    sub_date = forms.DateField(disabled=True, help_text="Datum", initial=date.today())
    # 替换为Textarea控件，设置显示行数和对齐样式
    content = forms.CharField(
        max_length=500, 
        help_text="Text", 
        widget=forms.Textarea(attrs={
            'rows': 5,  # 设置输入框默认显示5行
            'style': 'vertical-align: top;'  # 确保输入框内文本顶端对齐
        })
    )

    # 别忘了添加Meta类（如果之前有的话）
    class Meta:
        # 替换成你的模型和对应字段
        model = YourFeedbackModel
        fields = ['submitter', 'sub_email', 'sub_date', 'content']

模板代码（xxx.html）

<form id="category_form" method="POST">
    {% csrf_token %}
    {% for hidden in form.hidden_fields %}
        {{ hidden }}
    {% endfor %}
    <table>
        <tr>
            <td><strong>Datum</strong></td>
            <td>{{ form.sub_date }}{{ form.sub_date.errors }}</td>
        </tr>
        <tr>
            <td><strong>Name</strong></td>
            <td>{{ form.submitter }}{{ form.submitter.errors }}</td>
        </tr>
        <tr>
            <td><strong>E-Mail</strong></td>
            <td>{{ form.sub_email }}{{ form.sub_email.errors }}</td>
        </tr>
        <tr>
            <td><strong>Text</strong></td>
            <!-- 给这个单元格设置顶端对齐 -->
            <td style="vertical-align: top;">{{ form.content }}{{ form.content.errors }}</td>
        </tr>
    </table>
    <p><input type="submit" name="submit" value="Save" /></p>
</form>

额外优化建议 #

如果不想用内联样式，可以在CSS文件中定义一个类，这样更易于维护：

/* 比如在static/css/forms.css里 */
.form-top-align-cell {
    vertical-align: top;
}

然后模板里的td改成：

<td class="form-top-align-cell">{{ form.content }}{{ form.content.errors }}</td>

这样修改后，你的多行输入框就会实现文本顶端对齐，并且在表格单元格里也会靠上显示了。

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