如何在标签宽度增加时对齐所有字段

Question

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

这不会推送其他标签，因此它会留下“锯齿状”外观。理想情况下，它应该像下面的标记那样将它设置为图片3：

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

我created a jsFiddle来说明问题。

当然，解决这个问题的 easy cross-browser 方法就是使用表格。这只会为那些应该如此简单的东西创造标签。注意：不需要支持IE6。

Answer 1

您正在尝试创建表格......没有表格？在我看来，这是一种使用表格是一个非常好的解决方案的情况。我不明白'标签 - 地狱'应该是什么。一张桌子需要更多标签，当然，那又怎样呢？你可以用div包装所有东西并用浮点数模拟表格单元格，但是你会有一个css-hell;）。

Answer 2

我认为这就是你要找的东西：

label
{
    width: 150px;
    display: inline-block;
}
input[type=text]
{
    display: inline-block;
}

http://jsfiddle.net/rQ99r/5/

Answer 3

这个解决方案怎么样？

<fieldset id="fs1">
    <div class="column">
        <label>Name</label>
        <label>Username text text text </label>
    </div>
    <div class="column">
        <input type="text" />
        <br />
        <input type="text" />
    </div>
</fieldset>

的CSS：

label
{
  display: block;
}
.column{
    float:left;
}

小提琴：http://jsfiddle.net/steweb/xzHe6/

Answer 4

要么使用表格，要么使用像蓝图那样的CSS网格布局框架。 http://www.blueprintcss.org/

Answer 5

宽度对齐左右列，垂直对齐顶部

<fieldset>
    <label>Name</label><input type="text" /><br />
    <label>Username (aka aka aka aka aka aka aka aka aka aka aka)</label><input type="text" /><br />
    <label>Password</label><input type="text" /><br />
    <label>Confirm Password</label><input type="text" /><br />
</fieldset>

<br />
<label>Another label</label>

CSS：

fieldset label {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  text-align: right;
  font: 11px Verdana;
  color: #003399;
  margin: 4px 4px 4px 4px;
}

fieldset input {
  display: inline-block;
  vertical-align: top;
  margin: 4px 4px 4px 4px;
}

小提琴：https://jsfiddle.net/46okafre/