html - 输入溢出容器

Question

我遇到一个问题，将 width: 100% 设置为容器内的输入超出了容器容量。这个问题似乎不会发生在按钮上:

<form>    
  <input type="text" class="input"></input>    
  <button>Button</button>
</form>

CSS:

form {
  max-width: 200px;  
  border: 1px solid #eee;   
}

.input, button {
  width: 100%;
}

在这个例子中，按钮正确地填充了容器，但是输入扩展了一点:

我该如何解决这个问题？

我创建了一个代码笔:http://codepen.io/jviotti/pen/qfFmH

Answer 1

你可以修复这个添加

.input, button {
  width: 100%;
  box-sizing: border-box; /* add this */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
}

盒子尺寸调整 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing