Html 动态表单标签宽度的CSS

我目前正在重构一个表单控制器，以便我们可以将其用于面向公众的站点。目前它正在为表单生成一个表布局，但我正在尝试使用CSS表单来完成它

我正试图复制一些看起来像这样的东西

我遇到的问题是，我找到的每个CSS表单示例似乎都假定左列标签的宽度是固定的。我无法控制标签中的内容在我的例子中，它来自用户可编辑的翻译库。对于一张桌子，我会简单地使用空白：nowrap；而最长的标签将决定td的宽度，每个人都很高兴

可以用CSS做类似的事情吗？我已经尝试使用最小宽度并强制它不换行。这是可行的，但只会将当前控件向右推，并破坏对齐，更不用说IE 6中不支持最小宽度了

使用表格进行表单布局真的有那么糟糕吗？它是表格数据，在线性化后有意义。否？

您可以将

css设置为

显示：表格单元格

，将包含的

设置为

显示：表格行

。这将模拟使用表而不实际使用

的行为

<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-firstname">First Name:</label>
    <input type="text" name="fm-firstname" id="fm-firstname" />
</div>
<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-lastname">Last:</label>
    <input type="text" name="fm-lastname" id="fm-lastname" />
</div>

名字：
最后:

---

这在最近的任何浏览器（Firefox、Chrome、IE8+）中都会非常好。在IE7中，文本框不会正确对齐。

好吧，这里有一个有点非传统的解决方案，但我认为这种简单性应该适用于所有浏览器

---

可访问性似乎不是一个问题，因为键盘和鼠标控制都起到了很好的作用。当然，主要的缺点是，如果关闭CSS，该页面将无法很好地呈现。有关于这方面的统计数据吗？我也不知道屏幕阅读器会对这种放肆做出怎样的反应。

对我的知识来说，

表单总是占据可用宽度的100%。你可以用这个

如果允许填写此表单所提供容器的整个宽度，那么这似乎是一个有效的答案：


这种情况下的次要缺点是选择标签宽度和输入之间的比率。
max width
而不是
min width
？@Stijntjhe max width在我的情况下不起作用。我确实希望它们对齐，所以我需要一些宽度。如果我只为我的标签指定最大宽度，它们将遍布整个位置否？如果我在标签上添加一个边距底部：0.6em，至少它在包装时看起来并不可怕（因为它是向左浮动的，所以它通常会靠近另一个控件），我以为您使用了
min width
，但您应该使用
max width
。这个问题有点让人困惑。你真的不应该再担心IE6了。简洁的解决方案，但不使用IE6可能会通过，但不支持IE7我认为高层管理层不会同意；）我检查了分析，不幸的是IE 7仍然占我们访客的20%。。。为什么人们不升级呢+1和接受，这是一个很好的解决方案，希望浏览器将赶上CSS规格很快。感谢NGLN提供的其他答案+1.Simple fix，但我觉得“有点非传统”是一种轻描淡写的说法。我不确定fiddle如何正确地呈现这一点，但它在FireFox或Chrome中不起作用@jfrobishow：必须添加有效的doctype声明。在怪癖模式下，它确实变得丑陋。这就是怪癖的本来面目。