input text内容自适应宽度.doc

input text内容自适应宽度.doc

ID:57688393

大小:16.50 KB

页数:1页

时间:2020-09-01

input text内容自适应宽度.doc_第1页
资源描述:

《input text内容自适应宽度.doc》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、inputtext内容自适应宽度很早以前就看过ytzong的《宽度自适应的输入框》这篇文章,感觉很不错,非常详实,YUI的栅格决定宽度,内容决定高度确实很实用。个人认为ytzong的这个方法有两点非常麻烦:•需要套2层b标签;•公式:.fluid-input-inner{padding-right:输入框左边框+输入框右边框+输入框左padding+输入框右padding}也很麻烦经常忘记。前段时间在一个项目中真好用到,同事模拟了一个宽度自适应的输入框,原理和yt

2、zong的大致相同,但是解决了以上两个麻烦点。当然也有不足的地方。看代码:h2{margin:0;padding:10px0;font-size:14px;}.mod-retweet{background:#E4EFF4;border:1pxsolid#A8D1E0;padding:3px5px5px;ma

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%;}模拟宽度自适应的输入框

模拟宽度自适应的输入框

模拟input的自适

5、应:


模拟textarea的自适应:

6、div>可以发现一个非常讨厌的地方就是:•textarea和input文本输入框的边框是用套在其外层的容器的border来模拟的,textarea和input文本输入框的本身边框border:0none。这样webkit下输入框focus后,输入框的边框在模拟的边框里面,体验上有点不爽。•还有一点非常值得注意的是:textarea的padding和margin一定要重置为0,否则在webkit和opera下会有细小的bug。

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签