文本输入容器的填充宽度

Question

我在容器内部有一个输入,其宽度不同,通常不仅会在页面加载之间发生变化,而且在用户位于页面上时也会发生变化.我试图使输入始终填充容器.我目前使用的方法在某些浏览器中运行得很好,但不是全部.

HTML:

<div class="container">
      <input type="text" />
</div>

CSS:

.container {
    position: relative;
}
input {
    position: absolute;
    left: 0;
    right: 0;
    padding: 2px 4px;
}

填充使得我不能将宽度设置为100%,因为这会导致输入从填充溢出8px.在某些浏览器(至少是Windows上的Chrome)上,输入不受left和rightcss标记的影响,只保留默认输入宽度.我知道我可以用js来做,但我宁愿找到一个更简单的解决方案.是否有任何跨浏览器的方式来做纯css和没有js？

Answer 1

如果你使用css属性box-sizing: border-box;,填充将没有问题,你可以使用width:100%.

看到这里:CSS技巧

这是一个例子:jsbin

CSS:

.fill {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%
}

HTML:

<input class="fill" type="text"/>