给input设置width=”100%”,如果input有padding,会发现超出了父元素。

用偏移法解决即可。

151212更新:

给input加上box-sizing: border-box;即可。去他的偏移。

input宽度自适应效果

<div class="wrap">
    <input type="text" id="set-sign" />
</div>
#set-sign {
    width: 100%;
    margin-left: -22px; /* 2*(padding+border) */
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ddd;
}
.wrap {
    margin-left: 22px; /* 2*(padding+border) */
}

Chrome测试结果,其他未测。作为一个兼职前端,并不想理会什么兼容问题。