用于动态表单标签宽度的 CSS [英] CSS for dynamic form labels width
问题描述
我目前正在重构我们的一个表单控制器，以便我们可以将它用于面向公众的网站.目前它正在为表单生成表格布局，但我正在尝试使用 CSS 表单来完成它.
我正在尝试重现看起来像这样的内容 http://www.stylephreak.com/uploads/source/cssforms/cssform.php
我遇到的问题是，我发现的每个 CSS 表单示例似乎都假定左列标签的宽度是固定的.在我的情况下，我无法控制标签中的内容，它来自用户可编辑的翻译库.使用表格非常简单，我只需使用 whitespace:nowrap;最长的标签将决定 td 的宽度，每个人都很高兴.
是否可以用 CSS 做类似的事情?我试过使用 min-width 并强迫它不换行.这有效，但只是将当前控件推到了正确的位置并搞砸了对齐方式，更不用说 IE 6 不支持 min-width 了.
使用表格进行表单布局真的有那么糟糕吗?这是表格数据，毕竟线性化后有意义吗?
您可以将 css 设置为 display: table-cell 和包含的
display: table-row.这将模拟使用表格而不实际使用 的行为.<label style="display: table-cell; padding: 0 1em; text-align: right;"for="fm-firstname">名字:</label><input type="text" name="fm-firstname" id="fm-firstname"/><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"/>
这在任何最近的浏览器(Firefox、Chrome、IE8+)中看起来都很棒.在 IE7 中，文本框不会正确对齐.
I'm currently working on refactoring one of our Form Controller so that we can use it for a public facing site. Currently it's generating a table layout for the forms, but I am trying to get it done using CSS forms.
I am trying to reproduce something that would look like this http://www.stylephreak.com/uploads/source/cssforms/cssform.php
Issue I am having is that every CSS form examples I find seems to assume a fixed width for the left column label. I have no control over what goes in the label in my case, it's coming from a user editable translation bank. With a table it's super easy I would simply use whitespace:nowrap; and the longest label would decide on the td's width and everyone is happy.
Is it possible to do something similar with CSS? I've tried using min-width and forcing it not to wrap. This worked but only pushes the current control right and screwed up the alignment, not to mention that min-width isn't supported in IE 6.
Is it really that bad to use a table for form layouts? It's tabular data and make sense when linearized after all no?
解决方案 You can set the <label> css to display: table-cell and the containing <div> to display: table-row. This will mimic the behavior of using a table without actually using 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>
This will look great in any recent browser (Firefox, Chrome, IE8+). In IE7, the textboxes won't be aligned correctly.
这篇关于用于动态表单标签宽度的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆