动态表单标签宽度的CSS [英] CSS for dynamic form labels width

问题描述

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

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.

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

I am trying to reproduce something that would look like this http://www.stylephreak.com/uploads/source/cssforms/cssform.php

问题我有的是，每个CSS表单示例，我发现似乎假定左列标签的固定宽度。我无法控制在我的情况下，标签中的内容，它来自用户可编辑的翻译银行。有一个表，它是超级简单我只需使用whitespace：nowrap;并且最长的标签将决定td的宽度，每个人都很高兴。

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.

是否可以使用CSS做类似的事情？我试过使用min-width和强制它不包装。这工作，但只推动当前的控制权，拧紧对齐，更不要说min-width不支持在IE 6。

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?

推荐答案

您可以设置< label> ; css到 display：table-cell ，包含< div> code> display：table-row 。这将模仿使用表而不实际使用< table> 的行为。

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>

这在任何最近的浏览器（Firefox，Chrome，IE8 +）看起来很棒。在IE7中，文本框不会正确对齐。

This will look great in any recent browser (Firefox, Chrome, IE8+). In IE7, the textboxes won't be aligned correctly.

这篇关于动态表单标签宽度的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！