用于动态表单标签宽度的CSS

Question

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

我试图重现一些看起来像这样的东西http://www.stylephreak.com/uploads/source/cssforms/cssform.php

我遇到的问题是我找到的每个CSS表单示例似乎都假定左列标签的固定宽度.在我的案例中,我无法控制标签中的内容,它来自用户可编辑的翻译库.使用表格非常简单,我只需使用空格:nowrap; 并且最长的标签将决定td的宽度,每个人都很高兴.

可以用CSS做类似的事情吗？我尝试过使用min-width并强制它不要换行.这有效,但只是推动当前控制权并搞砸了对齐,更不用说IE 6中不支持最小宽度.

使用表格进行表单布局真的很糟糕吗？这是表格数据并且在线性化之后有意义吗？

Answer 1

您可以设置<label>css来display: table-cell和含<div>到display: table-row.这将模仿使用表而不实际使用a的行为<table>.

<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中,文本框将无法正确对齐.