html - 输入字段的大小不正确

Question

我在调整输入字段的大小方面遇到了一个非常烦人的问题，我不明白它是如何工作的。

我得到了这个代码。 HTML:

<div class="container">

  <div class="receipt">
    <p class="location"></p>
    <input type="text" id="checkoutField">

  <div class="checkoutButton">
     <a href="#/checkout">
       <p>some button</p>
     </a>         
  </div>

  </div>
</div>

容器的最大宽度为 480 像素。我希望 checkoutButton div 和输入字段都拉伸(stretch)到该宽度限制，同时两边也有 20px 的边距。元素也应该是响应式的，这就是它们没有固定大小的原因。

这在 div 上工作正常，但我无法让输入字段工作相同..我制作了一个包含 CSS 代码的 jsfiddle:jsfiddle

为什么输入会这样，我该如何解决？

Answer 1

与其对单个元素调用 margin left & right，不如为父容器调用 padding。检查修改后的代码 - http://jsfiddle.net/k7vzod4y/3/

.receipt {
   padding: 0 20px 24px;
}
.receipt .checkoutButton {
  margin: 0;
}
.receipt #checkoutField {
  width: 100%;
  margin: 0;
}

希望对您有所帮助。