html - 响应式 CSS 表单字段

Question

我有这个 CSS 来显示我的 html 表单和字段标签：

#enquiryForm                    { clear:both; padding:8px 40px 0 0;  }
.enquiryField                   { clear:both; padding:5px 0; }
.enquiryField label             { clear:none; float:left; }
.enquiryField input             { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea          { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }

.enquiryError                   { clear:both; color:#fff; font-family:Calibri; }
#enquirySent                    { color:#fff; font-family:Calibri; }

将文本显示在字段顶部的最佳方法是什么，因为我想将其放入我的响应式 CSS 代码中

Answer 1

我假设“在顶部”是指直接在之前而不是覆盖输入，因为那会很奇怪。将其包装在@media查询中并删除所有浮点数，将宽度设置为 100% 并添加一些边距。它将在视口宽度小于 480 像素的浏览器/设备上以线性方式显示，并根据需要更新宽度等。

http://jsfiddle.net/duncan/w9k5u/