用于替换表单表格布局的CSS

Question

我已经看过其他问题，但找不到解决这个问题的方法。考虑下图：mockup http://img201.imageshack.us/img201/935/image2h.png

我想包装div并垂直堆叠它们。绿色的div是一行上的包装器。蓝色div将包含一个html标签，也可能包含工具提示的图标。橙色的div将包含某种类型的条目(input、select、textarea)。

其中的几个将垂直堆叠在一起，组成一个表单。我现在正在做这件事，但我必须为容器div指定一个高度，这确实需要根据内容进行更改-考虑到任何条目都可能到达那里。图像和其他东西也可以在这里登陆。

我在蓝色div上设置了宽度，橙色是float:left。我如何去掉div上的高度，让它由内容决定呢？有没有更好的方法？将所有元素都更改为其他元素将是困难的，并且会更喜欢一种设置所有元素或其他元素样式的方法。

我使用的代码如下：

<div class=EntLine>
    <div class=EntLbl>
      <label for="Name">Name</label>
    </div>
    <div class=EntFld>
      <input type=text id="Name" />
    </div>
</div>

CSS看起来像这样：

.EntLine {
  height: 20px;
  position: relative;
  margin-top: 2px;
  text-align: left;
  white-space: nowrap;
}

.EntLbl {
  float: left;
  width: 120px;
  padding: 3px 0px 0px 3px;
  min-width: 120px;
  max-width: 120px;
  vertical-align: text-top;
}

.EntFld {
  float: left;
  height: 20px;
  padding: 0px;
  width: 200px;
}

Answer 1

嗯，首先，我认为你可以使用较少的加价来实现你的目标。您可能有一个很好的理由在表单的每个元素周围包装一个div，但是如果只是强制每一行都有一个标签输入对，那么您可以将input嵌套在label标记中：

      <label for="Name">Name
          <input type="text" id="Name" />
      </label>

这样你就可以使用一个简单的：

label {display: block; }

迫使每一对都走自己的路线。这还将消除对label进行float的需要，从而消除了指定任何包含元素的height的需要。

您仍然可以将多个类应用于相关字段/标签，但麻烦要少得多。除非我真的漏掉了什么。

如果做不到这些，您可以简单地在最后一个字段和样式后面添加一个空的div (或其他元素)：

#empty_element {
disply: block;
height: 0;
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */
visibility: hidden;
}