用 CSS 给 FORM Input 换行

自从若干年前看过《超越CSS:WEB设计艺术精髓》一书之后,再看 HTML 源文件就经常有各种心理障碍。刚才试着写个小注册表单,就有一个字段分行的问题。直接写:

<label><input>
<label><input>

会连成一行显示。这个问题非常容易解决,不管是用 div/p/br,还是用 label 包住 input 然后 display:box; 之,都可以达成效果。前者插了一堆没意义的标签,而且把布局与内容混为一体了;后者逻辑上感觉不太对,label 是 input 的一个修饰件才对嘛。

这个问题应该用 CSS 解决。直接的想法是 input:after ,不过 content:’\a’ 不起作用,又不能放标签,试了一下附个图片把后边的东东挤开,也没成。
再试 label:before,这回成了。
label:before { content: ‘\a’; white-space:pre; }


折腾图片的时候又掉坑里了,在 meteor app 里图片死活出不来,iron-router 总是跳出来说 template 找不着,明明图片是放在 public 下面,iron-rotuer 也是v1.0.7呀。各种疑神疑鬼,好久才发现,这 public 自己放到 /client 下边了,挪回顶上就好了。

** 扔草稿箱里居然忘了

Leave a Reply

Your email address will not be published. Required fields are marked *