动态表单标签宽度的CSS

问题描述

| 我目前正在重构我们的表单控制器之一，以便我们可以将其用于面向公众的网站。目前，它正在为表单生成表格布局，但是我正在尝试使用CSS表单来完成它。 我正在尝试重现如下所示的内容：http://www.stylephreak.com/uploads/source/cssforms/cssform.PHP 我遇到的问题是，我发现的每个CSS表单示例似乎都假定左列标签的宽度固定。我无法控制标签上的内容，它来自用户可编辑的翻译库。使用表，这非常简单，我只需要使用whitespace：Nowrap;即可。最长的标签将决定td的宽度，每个人都很高兴。 是否可以用CSS做类似的事情？我尝试使用最小宽度并强制不要包装。这行得通，但只能正确推动当前控件并弄乱对齐方式，更不用说IE 6不支持最小宽度。 使用表格进行表单布局真的那么糟糕吗？它是表格数据，线性化后是否有意义？     

解决方法

        您可以将

<label>

css设置为

display: table-cell

，并将包含的

<div>

设置为

display: table-row

。这将模仿使用表而不实际使用4的行为。

<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中，文本框无法正确对齐。     ,        好吧，这是一个有点非常规的解决方案，但是我认为简单性应该适用于所有浏览器。 样品摆弄。 可访问性似乎不是问题，因为键盘和鼠标控制都像鞭子一样。当然，主要的缺点是如果关闭CSS，此页面将无法很好地呈现。是否有关于此的统计数据？而且我也不知道屏幕阅读器将如何应对这种肆意。     ,        据我所知，ѭ6总是占据可用宽度的100％。您可以使用它。 如果允许填写此表单提供的容器的整个宽度，那么这似乎是一个有效的答案： 样品摆弄。 这种情况下的次要缺点是选择标签宽度和输入宽度之间的比例。