《input text内容自适应宽度.docx》由会员分享，可在线阅读，更多相关《input text内容自适应宽度.docx（2页珍藏版）》请在三一办公上搜索。
1、input text内容自适应宽度input text内容自适应宽度 很早以前就看过ytzong的宽度自适应的输入框这篇文章，感觉很不错，非常详实，YUI的栅格决定宽度，内容决定高度确实很实用。 个人认为ytzong的这个方法有两点非常麻烦： 需要套2层b标签； 公式：.fluid-input-innerpadding-right:输入框左边框 + 输入框右边框 + 输入框左padding + 输入框右padding也很麻烦经常忘记。 前段时间在一个项目中真好用到，同事模拟了一个宽度自适应的输入框，原理和ytzong的大致相同，但是解决了以上两个麻烦点。当然也有不足的地方。 看代码： h2 m
2、argin:0; padding:10px 0; font-size:14px; .mod-retweet background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; .mod-retweet .mod-retweet-textarea background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1
3、.mod-retweet .mod-retweet-textareatextarea padding: 0;margin: 0; border:0 none; font-size:12px; height:80px; line-height:1.5em; width:100%; display:block .mod-retweet .mod-retweet-textarea input border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; 模拟宽度自适应的输入框模拟宽度自适应的输入框模拟input的自适应：模拟textarea的自适应： 可以发现一个非常讨厌的地方就是： textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。 还有一点非常值得注意的是：textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。
