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>

容器的最大宽度为480px。我希望checkoutButton div和输入字段都延伸到该宽度限制，同时两侧也有20px的边距。元素也应该是响应性的，这就是为什么它们没有固定的大小。

这对div工作正常，但我不能让输入字段工作相同.. 我创建了一个包含CSS代码的jsfiddle：jsfiddle

为什么输入表现得像这样，我该如何解决？

Answer 1

而不是调用保证金左边＆amp;对于单个项目的权利，它是父容器的更好的调用填充。修改修改后的代码 - http://jsfiddle.net/k7vzod4y/3/

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

希望有所帮助。

Answer 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

中看到此操作

Answer 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％的宽度始终保持其父级的全宽。

输入字段的大小不正确

3 个答案: