Question

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

我正在尝试重现看起来像http://www.stylephreak.com/uploads/source/cssforms/cssform.php

的内容

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

是否可以使用CSS做类似的事情？我尝试过使用min-width并强制它不要换行。这有效，但只是推动当前控制权并搞砸了对齐，更不用说IE 6中不支持最小宽度。

使用表格进行表单布局真的很糟糕吗？它是表格数据，并且在线性化之后才有意义吗？

Answer 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中，文本框将无法正确对齐。

Answer 2

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

The sample fiddle

辅助功能似乎不是一个问题，因为键盘和鼠标控制都是一样的。当然，主要的缺点是如果关闭CSS，此页面将无法很好地呈现。有关于那的统计数据吗？而且我也不知道屏幕阅读器会如何对这种肆意做出反应。

Answer 3

我的知识form总是占据可用宽度的100％。你可以使用它。

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

The sample fiddle.

在这种情况下的一个小缺点是选择标签宽度和输入之间的比率。

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

3 个答案: