Django表单小部件中文本的垂直对齐答案

【问题标题】：Vertical alignment of text in Django form widgetDjango表单小部件中文本的垂直对齐
【发布时间】：2020-07-11 00:32:33
【问题描述】：

我的表单中有一个多行输入字段。文本在中间对齐，但我希望它与顶部对齐。

我的表格：

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())
    content = forms.CharField(max_length=500, help_text="Text",
        widget=forms.TextInput(attrs={'vertical-align': 'top'}))

我的模板：

<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>{{ form.content }}{{ form.content.errors }}</td>
        </tr>
    </table>

    <p><input type="submit" name="submit" value="Save" /></p>
</form>

我正在尝试在小部件的 attrs 属性中传递 CSS 样式，如 Django 文档中所述。但我的文字仍然在中间对齐。我做错了什么？

【问题讨论】：

标签： python django django-forms

【解决方案1】：

想通了。

您所做的是使用 Textarea 小部件代替 TextInput：

content = forms.CharField(max_length=500, help_text="Text",
        widget=forms.Textarea()

然后你可以在 CSS 中应用样式：

textarea, input, button, select { 
    font-family: inherit; font-size: inherit; 
}

【讨论】：