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

Question

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

这并没有推动其他标签,因此它留下了"锯齿状"外观.理想情况下,它应该像下面的标记那样将它设置为图片3的样式:

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

替代文字

当然,解决这个问题的简单的跨浏览器方式是使用表格.这只会为那些应该如此简单的东西创造标签.注意:这并没有需要支持IE6.

Answer 1

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

[表格中的W3C](http://www.w3.org/TR/html401/struct/tables.html#h-11.1):"HTML表格模型允许作者安排数据 - 文本,预先格式化的文本,图像,链接,表单,表单字段,其他表格等 - 进入单元格的行和列." 因为这正是OP想要做的,所以使用表格并没有错.但是如果你想坚持_tabular data_只能是一个数字列表而且在其他情况下_你应该避免使用表格,将所有内容包装在一个块元素中并写下很多CSS,我不会阻止你. (11认同)
表格不是表格; 它不是数据的表格显示.例如,每行不包含与前一行格式相同的数据.它们可能是_grids_,但这完全是布局(即表示),而不是语义. (3认同)
我不同意桌子是邪恶的断言.我认为使用它们来模拟CSS样式是一个坏主意,但使用它们网格似乎对我来说好...... Google使用表格来表单数据. (2认同)
好吧,这里有一个更好的例子,w3使用表格表格.但我想我们也不应该依赖它们？http://www.w3.org/Consortium/application (2认同)

Answer 2

我想这就是你要找的东西:

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