输入超出容器范围

Question

6

我有一个问题，就是将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%;
}

在这个例子中，按钮正确地填充了容器，但输入框延伸得更远： enter image description here

我该如何解决这个问题？

我已经创建了一个CodePen：http://codepen.io/jviotti/pen/qfFmH

- jviotti

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

您可以通过添加以下内容来解决此问题：

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