输入字段的大小不正确答案

【问题标题】：input field won't size correctly输入字段的大小不正确
【发布时间】：2015-11-16 05:36:41
【问题描述】：

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

我得到了这个代码。 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 和输入字段都延伸到该宽度限制，同时在两侧也有 20px 的边距。元素也应该是响应式的，这就是它们没有固定大小的原因。

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

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

【问题讨论】：

标签： html css

【解决方案1】：

与其调用单个项目的左右边距，不如调用父容器的填充。检查修改后的代码 - http://jsfiddle.net/k7vzod4y/3/

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

很容易使用 CSS3 calc 函数。您可以将宽度设置为100% - 40px 以处理您的边距。像这样的：

.receipt #checkoutField {
    width: calc(100% - 40px);
    border: 0;
    height: 40px;
    background-color: #35aba2;
    border-radius: 4px;
    margin-top: -6px;
    margin-left: 20px;
}

您可以在更新的fiddle 中看到这一点

【讨论】：

谢谢。这也有效，实际上之前从未见过 calc 函数。

【解决方案3】：

因此，在查看您的代码示例后，我将使用以下方法。我在您链接的 JSFiddle 上使用了以下内容，它按照您所说的那样工作。

将输入字段的宽度设置为 100%：

.receipt #checkoutField {
    border: 0;
    width: 100%;
    height: 40px;
    background-color: #35aba2;
    border-radius: 4px;
    margin-top: -6px;
    margin-left: 20px;
    margin-right: 20px;
}

然后在结帐按钮上也是 100% 宽度：

.receipt .checkoutButton {
    width: 100%;
    height: 50px;
    background-color: #35aba2;
    border-radius: 4px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
    margin-top: -6px;
}

这种方法也是响应式的，因为我使用了相关单位的百分比，因此它们从父级继承。因此，无论视口大小如何，100% 的宽度都将始终保持其父级的全宽。

【讨论】：

我也在尝试这个，但是你可以看到它们随后延伸到容器之外。您可以通过阴影查看容器大小。这就是发生的事情jsfiddle.net/k7vzod4y/4
它似乎是 margin-left: 20px 导致容器内的元素推出一点。所以删除它是有效的。