如何在标签宽度增长时对齐所有字段 [英] How to align all fields as label width grows

问题描述

我有一个表单，其中的标签在左边，字段在右边。当标签有少量文本时，此布局效果很好。我可以很容易地在标签上设置 min-width ，以确保它们与字段的距离相同。在下面的第一张图片，这工作原理。当标签的文本变得太长时，会出现问题，它会溢出到下一行或将同一行上的字段推到左边（如图2所示）。

I have a form where the labels are on the left and the fields on the right. This layout works great when the labels have small amounts of text. I can easily set a min-width on the labels to ensure they all have the same distance to the fields. In the first picture below, this works as expected. A problem arises when the label's text becomes too long, it'll either overflow to the next line or push the field on the same line over to the left (as seen in picture 2).

这不会推动其他标签，因此留下的是锯齿状的外观。理想情况下，它应该像下面的标记一样对它进行风格化：

This doesn't push the other labels so it is left with a "jagged" look. Ideally, it should like to style it as picture 3 with something like the following markup:

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

我创建了一个jsFiddle 来显示问题。

当然，轻松的跨浏览器解决方法就是使用表。这只是创建标签的地狱，应该是这么简单的东西。注意：这不会需要支持IE6。

Of course, the easy cross-browser way to solve this would be to use tables. That just creates tag-hell for something that should be so simple. Note: this does not need to support IE6.

推荐答案

..没有表？对我来说，这是一种使用表是一个完美的解决方案的情况。我没有看到标签 - 地狱应该是什么。 A表需要更多的标签，肯定，但是什么？你可以在div中包装所有东西，并用浮点模拟表单元格，但是你会有一个css-hell;）。

You're trying to create tables... without tables? Seems to me this is a situation where using tables is a perfectly fine solution. And I don't see what the 'tag-hell' should be. A tables needs a few more tags, sure, but so what? You could wrap everything in divs and simulate table cells with floats, but then you'll have a css-hell ;) .

这篇关于如何在标签宽度增长时对齐所有字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！