0

我正在用这个参考设计 django 表单字段。

形式:

class contact(forms.Form):
    first_name = forms.CharField()
    middle_name = forms.CharField()
    last_name = forms.CharField()

模板:

<form action="/contact/" method="post">
    {% include "form_snippet.html" %}
    <p><input type="submit" value="Send message" /></p>
</form>

在 form_snippet.html 中:

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }}: {{ field }}
    </div>
{% endfor %}

在 CSS 中:

.fieldWrapper{
    font-size; 10px;
    color: #f00;
    font-family: verdana, tahoma, serif;
    white-space:nowrap;
}

当我运行服务器时,每个表单字段都显示在新行中。

我想将这三个表单字段放在同一行中,而不是每个都放在新行中。

任何的想法?

4

3 回答 3

2

像这样更新css代码,

 .fieldWrapper{
   font-size; 10px;
   color: #f00;
   font-family: verdana, tahoma, serif;
   white-space:nowrap;
   display:inline;
 }
于 2012-12-17T12:20:43.187 回答
1

您将每个字段包装在一个div标记中,一个块元素。

.fieldWrapper类一个非块定位..比如inline,,float:left等等。

于 2012-12-17T10:06:41.823 回答
0

由于 div 是一个块元素,因此将 div 标签放在“for”循环之外:

 <div class="fieldWrapper"> 
 {% for field in form %}
         {{ field.errors }}
         {{ field.label_tag }}: {{ field }}
 {% endfor %} 
 </div>

或不添加外部 css 类:

 {% for field in form %}
        {{ field.errors }}
        <nobr> {{ field.label_tag }}: {{ field }}</nobr>
 {% endfor %}
于 2012-12-17T10:25:20.903 回答