HTML列或表格布局的行？ [英] HTML columns or rows for form layout?

问题描述

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

I'm building a bunch of forms that have labels and corresponding fields (input element or more complex elements).

标签位于左侧，字段位于右侧。

Labels go on the left, fields go on the right. Labels in a given form should all be a specific width so that the fields all line up vertically.

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

There are two ways (maybe more?) of achieving this:

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

1. Rows: Float each label and each field left. Put each label and field in a field-row div/container. Set label width to some specific number. With this approach labels on different forms will have different widths, because they'll depend on the width of the text in the longest label.

列：将所有标签放在一个左侧悬浮的div /容器中，将所有字段放在另一个左侧已填充的容器中，并设置padding-left。这样，标签，甚至标签容器不需要设置其宽度，因为列布局和左侧填充将统一地处理垂直排列所有字段。

Columns: Put all labels in one div/container that's floated left, put all fields in another floated left container with padding-left set. This way the labels and even the label container don't need to have their widths set, because the column layout and the padding-left will uniformly take care of vertically lining up all the fields.

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

So approach #2 seems to be easier to implement (because the widths don't need to be set all the time), but I think it's also less object oriented, because a label and a field that goes with that label are not grouped together, as they are in approach #1. Also, if building forms dynamically, approach #2 doesn't work as well with functions like addRow(label, field), since it would have to know about the label and the field containers, instead of just creating/adding one field-row element.

你认为哪种方法更好？是否还有另一种更好的方法？

Which approach do you think is better? Is there another, better approach than these two?

推荐答案

方法＃1是好得多的原因，灵活性和Kevin Boucher提到的其他要点，以及关于动态创作的自己的观点。

Approach #1 is the far better for a number of reasons, mainly pertaining to flexibility and the other points mentioned by Kevin Boucher, plus your own points with regard to dynamic creation.

我不建议不要包含元素 - 即使它是很好的可能 - 你拒绝自己在填充，定位和溢出处理方面的很多额外的力量。这也使动态创作更棘手。

I wouldn't recommend not having containing elements - even though it is nicely possible - you deny yourself a lot of extra power with regards to padding, positioning and overflow handling. It also makes dynamic creation more tricky.

你的参数为方法＃2也不一定是一个好处，考虑到你可以为你的标签容器设置一个宽度你的CSS - 通过类 - 这可以很容易地改变或设计为响应。

Your arguments for going with approach #2 also need not be a benefit either, considering you can set one width for your label container in your css - via a class - and this can easily be changed or designed to be responsive. Basically meaning you only have one place again to change your label dimensions.

此外，＃2，同时使水平标签布局更加自动 - 垂直布局将变得更加手动和棘手的，因为你必须给你的标签和字段容器相同的高度，以排队（因为他们不能依赖一个mutal父）。我猜猜你会有更多的行而不是列，所以这只是添加工作）。

Also With #2, whilst making your horizontal label layout more automatic - vertical layout would become more manual and tricky considering you would have to give your label and field containers the same height in order to line up (as they couldn't rely on a mutal parent). I'd make a guess that you'll have more rows than columns so this would just add work ;)

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>

我可能会去上面自己，因为这将覆盖我所需要的大部分，但是如果您想要更多地控制应用中可能发生的可能的更改，您可以执行以下操作：

I'd probably go for the above myself as that would cover most of what I've ever needed, however if you wanted more control with regard to possible future changes that might occur in your app, you could do the following:

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添加说明文字） - 您也可以更好地控制中心或右对齐。

By just adding one extra wrapper you then allow for the ability of more complicated labels (i.e. hiding the text and replacing with images, or adding explanatory text with js) - you also give yourself more control with regards to center or right alignment.

只是我的想法：）

这篇关于HTML列或表格布局的行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！