Question

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

标签在左侧，字段在右侧。给定形式的标签应该都是特定的宽度，以便所有字段都垂直排列。

实现这一目标有两种方式（可能更多？）：

行：浮动每个标签并留下每个字段。将每个标签和字段放在字段行div /容器中。将标签宽度设置为某个特定数字。使用此方法，不同表单上的标签将具有不同的宽度，因为它们将取决于最长标签中文本的宽度。
列：将所有标签放在一个左侧浮动的div /容器中，将所有字段放在另一个带有padding-left设置的左侧容器中。这样标签甚至标签容器都不需要设置其宽度，因为列布局和左边的填充将统一处理所有字段的垂直排列。

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

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

Answer 1

方法＃1是出于好的原因，主要涉及灵活性和Kevin Boucher提到的其他要点，加上你自己关于动态创作的观点。

我不建议不要使用包含元素 - 即使它很可能 - 你会在填充，定位和溢出处理方面给自己留下很多额外的力量。它还使动态创作更加棘手。

你采用方法＃2的论点也不一定是好处，考虑到你可以在你的css中为你的标签容器设置一个宽度 - 通过一个类 - 这可以很容易地改变或设计为响应。基本上意味着您只需要一个地方来更改标签尺寸。

同样使用＃2，同时使您的水平标签布局更加自动 - 考虑到您必须为标签和现场容器提供相同的高度以便排列（因为它们），垂直布局会变得更加手动和棘手不能依赖一个变异的父母）。我猜你会有更多的行而不是列，所以这只会添加工作;）

的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>

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

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添加解释性文本） - 你也可以给自己更多的控制关于中心或右对齐。

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

Answer 2

都不是。用CSS做 - 包含div是不必要的。例如：

<style>
  form { width: 28em; margin: 5px; padding: 5px; border: solid #000 1px; }
  label { width: 6em; float: left; text-align: right; margin: .5em 1em; clear: both; border: dashed #666 1px; }
  input, textarea { margin: .5em 0; width: 17em; }
</style>

<form>
  <label for="first">First Name:</label>
  <input type="text" name="first_name" id="first" size="20" maxlength="50" />
  <label for="last">Last:</label>
  <input type="text" name="last_name" id="last" size="20" maxlength="50" />
</form>

http://jsfiddle.net/k4xEG/

Answer 3

仅使用div的

行方法。 jsFiddle这里：http://jsfiddle.net/v7R8j/1/

<强> HTML：

<form>
<div class="label">Type text:</div>
<div class="field"><input type="text"/></div>
<div class="clear"></div>

<!-- ... -->

<div class="label">Submit button:</div>
<div class="field"><input type="submit"/></div>
<div class="clear"></div>
</form>

<强> CSS：

.label {
    width: 150px;
}
.field, .label {
    float: left;
    border: 1px solid orange;   
    padding: 4px;
    margin: 4px;
}

.clear {
    clear:both;   
}

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

3 个答案: