用 CSS 给 FORM Input 换行

最新推荐文章于 2024-07-25 21:38:25 发布

pinxue

最新推荐文章于 2024-07-25 21:38:25 发布

阅读量1.4w

点赞数 1

文章标签： css web设计标签布局 html

本文链接：https://blog.csdn.net/pinxue/article/details/45397369

版权

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">自从若干年前看过《超越CSS:WEB设计艺术精髓》一书之后，再看 HTML 源文件就经常有各种心理障碍。刚才试着写个小注册表单，就有一个字段分行的问题。直接写：</span>

<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 下边了，挪回顶上就好了。

** 扔草稿箱里居然忘了