html - nobrhtmlタグをdjangoフォームフィールドに適用します

Question

このリファレンスを使用して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;
}

サーバーを実行すると、各フォームフィールドが新しい行に表示されます。

これらの3つのフォームフィールドをそれぞれ新しい行ではなく、同じ行に配置したいと思います。

何か案が？

score 2 · Accepted Answer

このようにcssコードを更新します。

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

score 1 · Accepted Answer

各フィールドをdivタグ、ブロック要素でラップしています。

.fieldWrapperクラスに非ブロックポジショニングを与えます。、、などのようinlineにfloat:left。

score 0 · Accepted Answer

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 %}

3 に答える 3