欢迎来到天天文库
浏览记录
ID:57688393
大小:16.50 KB
页数:1页
时间:2020-09-01
《input text内容自适应宽度.doc》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、inputtext内容自适应宽度很早以前就看过ytzong的《宽度自适应的输入框》这篇文章,感觉很不错,非常详实,YUI的栅格决定宽度,内容决定高度确实很实用。个人认为ytzong的这个方法有两点非常麻烦:•需要套2层b标签;•公式:.fluid-input-inner{padding-right:输入框左边框+输入框右边框+输入框左padding+输入框右padding}也很麻烦经常忘记。前段时间在一个项目中真好用到,同事模拟了一个宽度自适应的输入框,原理和yt
2、zong的大致相同,但是解决了以上两个麻烦点。当然也有不足的地方。看代码:
3、rgin-top:5px;}.mod-retweet.mod-retweet-textarea{background-color:#FFFFFF;border:1pxsolid#64B2D1;margin-bottom:5px;overflow:hidden;padding:2px;position:relative;zoom:1}.mod-retweet.mod-retweet-textareatextarea{padding:0;margin:0;border:0none;font-size:12px;height:80p
4、x;line-height:1.5em;width:100%;display:block}.mod-retweet.mod-retweet-textareainput{border:0none;font-size:12px;height:20px;line-height:1.5em;width:100%;}
5、应:
6、div>可以发现一个非常讨厌的地方就是:•textarea和input文本输入框的边框是用套在其外层的容器的border来模拟的,textarea和input文本输入框的本身边框border:0none。这样webkit下输入框focus后,输入框的边框在模拟的边框里面,体验上有点不爽。•还有一点非常值得注意的是:textarea的padding和margin一定要重置为0,否则在webkit和opera下会有细小的bug。
此文档下载收益归作者所有