input宽度自适应的问题

在很多地方看到过这样的问题，就是关于input宽度设置的问题。

如图，图中黑色框就是设置了100%后，input输入框的展现，很是蛋疼。

<style type="text/css">
    .box{width:300px;height:200px;background-color:tan;padding-top:50px;}
    .box div{height:30px;background-color:green;padding-top:5px;}
    .box div input{width:100%;padding:0 5px;}
</style>
<div class="box pdr20">
    <div>
        <input type="text" name="" />
    </div>
</div>

针对与上述问题：

这是我的几种方法，你试试，想用哪种用哪种，好处：简单，不需要任何 script 代码

 
问题出在了input的边框问题 ,默认有border-style: inset边框2象素
在包含input的div中 可以加上面代码padding-right减去边框就行
如果不需要太长的input，可以设置input宽度为99%
也可以不加任何代码，但需要把input 边框去掉 如：border: none;
去掉边框后，在input的外面套一个div元素，或者你觉得合适的元素 ，把div元素设置上边框，可以实现你要的效果。

可以移步到blog：sundexin.com 查看更多文章