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

【问题标题】：CSS for dynamic form labels width用于动态表单标签宽度的 CSS
【发布时间】：2011-09-03 11:14:06
【问题描述】：

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

我正在尝试重现类似 http://www.stylephreak.com/uploads/source/cssforms/cssform.php 的东西

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

是否可以用 CSS 做类似的事情？我试过使用 min-width 并强制它不换行。这可行，但只会将当前控件向右推并搞砸了对齐方式，更不用说 IE 6 不支持 min-width。

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

【问题讨论】：

max-width 而不是 min-width?
我认为 @Stijntjhe max-width 在我的情况下不起作用。我确实希望它们对齐，所以我需要某种宽度。如果我只为我的标签指定最大宽度，它们会到处都是吗？
如果我在标签上添加一个 margin-bottom:0.6em 至少它在包装时看起来并不可怕（它过去常常靠近另一个控件，因为它是向左浮动的）跨度>
我以为你使用了min-width，但你应该使用max-width。这个问题有点令人困惑。
你真的不应该再担心IE6了。

标签： html css webforms stylesheet

【解决方案1】：

您可以将<label> css 设置为display: table-cell，并将包含的<div> 设置为display: 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 中，文本框不会正确对齐。

【讨论】：

简洁的解决方案，但不能在 IE 6 中工作可以通过，但不支持 IE 7 我认为这不会与高层管理人员合作;)
我检查了分析，不幸的是 IE 7 仍然占我们访问者的 20%...为什么人们不升级！
+1 并被接受，这是一个很好的解决方案，希望浏览器能很快赶上 CSS 规范。感谢 NGLN 的其他答案以及 +1。

【解决方案2】：

嗯，这是一个有点不合常规的解决方案，但我认为这种简单性应该适用于所有浏览器。

The sample fiddle.

辅助功能似乎不是问题，因为键盘和鼠标控制都如愿以偿。当然，主要的缺点是如果 CSS 关闭，这个页面就不能很好地呈现。有没有关于这方面的统计数据？而且我不知道屏幕阅读器会如何应对这种肆意妄为。

【讨论】：

简单的修复，但我觉得“有点不合常规”是轻描淡写。
不确定 fiddle 是如何正确渲染的，但它在 FireFox 或 Chrome 中不起作用。 pastebin.com/GjcQwRRj
@jfrobishow：您必须添加有效的文档类型声明。在怪癖模式下，它确实变得丑陋。怪癖应该是这样的。

【解决方案3】：

据我所知forms 总是占据 100% 的可用宽度。你可以使用它。

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

The sample fiddle.

这种情况下的次要缺点是选择标签宽度和输入之间的比率。

【讨论】：