4

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

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

有两种方法（也许更多？）来实现这一点：

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

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

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

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

4

3 回答 3

3

方法 #1 的效果要好得多，原因有很多，主要涉及灵活性和 Kevin Boucher 提到的其他观点，以及您自己关于动态创建的观点。

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

考虑到您可以通过类为 CSS 中的标签容器设置一个宽度，您使用方法 #2 的论点也不一定有好处，这可以轻松更改或设计为响应式。基本上意味着您只有一个地方可以再次更改标签尺寸。

同样使用＃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 添加解释性文本） - 您还可以在居中或右对齐方面给予自己更多的控制权。

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

于 2012-10-23T22:52:19.300 回答
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/

于 2012-10-23T22:25:06.583 回答
0

仅使用 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;   
}
于 2012-10-23T22:36:43.790 回答