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 查看更多文章