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