如何解决动态表单标签宽度的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%。您可以使用它。
如果允许填写此表单提供的容器的整个宽度,那么这似乎是一个有效的答案:
样品摆弄。
这种情况下的次要缺点是选择标签宽度和输入宽度之间的比例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。