如何随着标签宽度的增加对齐所有字段

我有一个表单，其中标签位于左侧，字段位于右侧。当标签包含少量文本时，此布局非常有效。我可以轻松设置min-width标签上，以确保它们与田地的距离相同。在下面的第一张图片中，这按预期工作。当标签的文本变得太长时就会出现问题，它要么溢出到下一行，要么将同一行上的字段推到左侧（如图 2 所示）。

这并没有推动other标签，因此留下“锯齿状”外观。理想情况下，它应该像图 3 那样使用类似以下标记的样式：

<fieldset>
    <label>Name</label><input type="text" /><br />
    <label>Username</label><input type="text" />
</fieldset>

I 创建了一个jsFiddle http://jsfiddle.net/rQ99r/3/来展示问题。

当然，轻松跨浏览器解决这个问题的方法是使用表格。这只会为本来应该如此简单的事情创造标签地狱。注意：这确实not需要支持IE6。

您正在尝试创建表格...没有表格？在我看来，在这种情况下，使用表格是一个完美的解决方案。我不明白“标签地狱”应该是什么。当然，一个表还需要一些标签，但那又怎样呢？您可以将所有内容包装在 div 中并用浮动模拟表格单元格，但随后您将遇到 css-hell ;) 。