【发布时间】：2012-04-12 02:19:58
【问题描述】：
请参考this jsfiddle。
我的目标是构思一些 HTML 标记，使我能够自动生成具有可变标签宽度、顶部或左侧标签的表单，而无需有条件地生成 [much] 标记。
为了实现与不同标签宽度的标签对齐，我使用了display: table cell/row; 中列出的this question 技巧。
但是，只有当我的所有标签都是 label.left. 时，这才有效。当我有 label.top 时，我无法找到一种 CSS 方法将兄弟 div.control 推到下一行！
谁能想象一个简单的方法来做到这一点，或者更适合的布局来实现我正在寻找的东西？
我很清楚，我希望“姓氏”的 div.control 出现在其标签的下一行。
谢谢！
【问题讨论】：
-
有必要使用table-row吗？
-
不，不是。到目前为止，除了使用表格之外，这是我想出的允许自动标签宽度对齐的唯一方法。如果您有其他选择，我会全力以赴！
-
您只需告诉我您想要什么样的布局和结构，我会立即为您提供解决方案。如果可能，请显示图像或屏幕截图。
-
和我原来的帖子一样，我的要求是标签自动对齐，不管它们的宽度如何。标签可能位于顶部或左侧，如 .top 和 .left 类所示。如果您访问我链接的 jsfiddle，想象“姓氏”的输入字段位于新行上。用手来做这件事是微不足道的。我需要自动生成这个标记，这就是为什么我想要一个基于 CSS 的解决方案。