我目前正在重构我们的表单控制器,以便我们可以将其用于面向公众的站点.目前它正在为表单生成表格布局,但我正在尝试使用CSS表单完成.
我正在尝试重现一些像这样的http://www.stylephreak.com/uploads/source/cssforms/cssform.php的东西
我遇到的问题是,我发现每个CSS表单示例似乎假定左列标签的固定宽度.我无法控制我的情况下的标签,它来自用户可编辑的翻译银行.有一个表,它是超级容易,我只会使用空格：nowrap;最长的标签将决定td的宽度,每个人都很高兴.
有可能做类似于CSS的事情吗？我试过使用最小宽度并强制它不包装.这是有效的,但只是推动当前的控制权,并拧紧了对齐方式,更不用说IE 6中不支持最小宽度.
在表单布局中使用表格真的很糟糕吗？这是表格数据,并且在线性化之后有意义吗？
解决方法
您可以设置< label> css显示：table-cell和包含< div>显示：table-row.这将模拟使用表而不实际使用< 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中,文本框将不会正确对齐.
