2011-07-04 7 views
3

私はは、どのように私はテーブル

{% for field in form %} 
{{ LABEL }}{{ INPUT FIELD }} 

以下のラベルとフィールドのような変数は、ループを通過するフォームをループして、HTMLフォームを生成していますを使用せずに2つの列フォームのレイアウトを設計することができます。

しかし、私は20のフィールドを持っているので、上の行と下のフィールドに2列のテキストを配置したいと思っています。 http://www.w3schools.com/cssref/pr_class_float.asp

答えて

3

代わりのdivで各項目を包む、あなたが一緒に保存しておきたいアイテムをラップは

form { width: 800px; /* or whatever */ } 
form > div { display: inline-block; width: 50%; } 
label, input { display: block; } 

をあなたは調整する必要がありますパディング、余白などを考慮する幅。フォームフィールドは、2つの列でページの右から左に流れます。

-1
次の2つの列にコントロールを配置するためにCSSの「フロート」プロパティを使用することができます

...

チェックこれを行うことができます方法がわかりませんあなたのラベルとCSSで入力フィールド。 Aリストの「Gurus」による標準的な指示があります。http://www.alistapart.com/articles/prettyaccessibleforms

ただし、これは1行よりも長いラベルを持つフォームでは破損します。

また、(div要素を使用する代わりに)定義リスト内のラベルと要素をラッピングするのが一般的です。このようなフォームのスタイルを設定する方法については、ここで読むことができます:http://aspnetresources.com/blog/styling_definition_lists しかし、そのようなHTMLがまだ意味論的である場合は、非常に議論されているので、HTML標準のオタクには注意してください。このような何か

{% for field in form %} 
    <div>{{ LABEL }}{{ INPUT FIELD }}</div> 

次に、あなたのCSSに:

0

当社べきスタイル:しかし、私はループで