Question

我通过循环遍历下面的表单变量来生成html表单

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

标签和字段经过循环。我可以通过

生成简单的一列

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

但我有20个字段，所以我希望有2列布局，上面的文字和下面的字段。但我不知道我怎么能在循环中做到

Answer 1

不是将每个项目包装在div中，而是将要保留的项目包装起来：

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

然后在你的CSS中做这样的事情：

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

您可能需要调整宽度以考虑填充，边距等。表单字段将在两列中从右向左和向下流动。

Answer 2

我们应该使用CSS设置标签和输入字段的样式。 A List的“Gurus”标准指令分开：http://www.alistapart.com/articles/prettyaccessibleforms

但是，这会打破标签长度超过一行的表单。

同样流行的是在定义列表中包装标签和元素（而不是使用div元素）。您可以在此处阅读如何设置此类表单的样式：http://aspnetresources.com/blog/styling_definition_lists 如果这样的HTML仍然是语义上的争论，那么请注意HTML标准书呆子。

Answer 3

您可以使用css的“float”属性在两列中排列控件...