用于表单布局的 HTML 列或行？

Question

我正在构建一堆具有标签和相应字段(输入元素或更复杂的元素)的表单。

标签在左边，字段在右边。给定表单中的标签都应具有特定的宽度，以便所有字段都垂直排列。

有两种方法(也许更多？)可以实现这一点:

1. Rows:将每个标签和每个字段向左浮动。将每个标签和字段放在字段行 div/容器中。将标签宽度设置为某个特定数字。使用这种方法，不同表单上的标签将具有不同的宽度，因为它们将取决于最长标签中文本的宽度。

2. 列:将所有标签放在一个向左浮动的 div/容器中，将所有字段放在另一个设置了 padding-left 的向左浮动容器中。这样标签甚至标签容器都不需要设置宽度，因为列布局和 padding-left 将统一处理垂直排列所有字段。

所以方法 #2 似乎更容易实现(因为不需要一直设置宽度)，但我认为它也不那么面向对象，因为标签和与该标签相关的字段是没有组合在一起，因为它们在方法 #1 中。此外，如果动态构建表单，则方法 #2 不适用于 addRow(label, field) 等函数，因为它必须知道标签和字段容器，而不仅仅是创建/添加一个字段行元素。

您认为哪种方法更好？还有比这两种更好的方法吗？

Answer 1

由于多种原因，方法 1 更好，主要是关于灵 active 和 Kevin Boucher 提到的其他要点，以及您自己关于动态创建的要点。

我不建议不包含元素——尽管它很有可能——你会否认自己在填充、定位和溢出处理方面有很多额外的能力。它还使动态创建更加棘手。

考虑到您可以在您的 css 中为您的标签容器设置一个宽度 - 通过一个类 - 并且这可以很容易地更改或设计为响应式，您对采用方法 #2 的争论也不一定是一个好处。基本上意味着您只有一个地方可以再次更改标签尺寸。

还有#2，虽然让你的水平标签布局更加自动化 - 垂直布局会变得更加手动和棘手，因为你必须给你的标签和字段容器相同的高度才能排列(因为它们不能依赖共同的 parent )。我猜你的行数会比列数多，所以这只会增加工作量；)

CSS:

.field-row {
  overflow: hidden;
}

.field-row label {
  display: block;
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 70%;
  float: left;
}

标记:

<div class="field-row">
  <label>Label Text</label>
  <div class="field-container">
    <input type="text" />
  </div>
</div>

我自己可能会选择上述内容，因为这将涵盖我所需要的大部分内容，但是如果您希望对应用中可能发生的 future 更改进行更多控制，您可以执行以下操作:

CSS 2:

.field-row {
  overflow: hidden;
}

.field-row .label-container {
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 70%;
  float: left;
}

标记 2:

<div class="field-row">
  <div class="label-container"><label>Label Text</label></div>
  <div class="field-container">
    <input type="text" />
  </div>
</div>

只需添加一个额外的包装器，您就可以使用更复杂的标签(即隐藏文本并用图像替换，或使用 js 添加解释性文本) - 您还可以给自己更多的控制权关于居中或右对齐。

无论如何只是我的想法:)