如何在不使用表格的情况下设计两列表单布局答案

【问题标题】：How can i design two column form layout without using tables如何在不使用表格的情况下设计两列表单布局
【发布时间】：2011-09-28 03:35:30
【问题描述】：

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

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

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

生成简单的一列

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

但是我有 20 个字段，所以我希望有 2 列布局，上面有文本，下面有字段。但我不知道如何循环执行

【问题讨论】：

标签： javascript html css forms webforms

【解决方案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; }

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

检查这个： http://www.w3schools.com/cssref/pr_class_float.asp

【讨论】：