css - 如何使此输入文本字段响应

在全窗口中打开并调整窗口的大小，输入字段没有响应，因此按钮在输入下方移动，这不是我想要的。

.coupon {
  width: 100%;
  max-width: 500px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 22px;
}
.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
  max-width: 100%;
}

<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>

最佳答案

尝试使用width: calc(100% - 86px);。

.coupon {
  width: calc(100% - 86px);
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 22px;
}
.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
}

<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>

关于css - 如何使此输入文本字段响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57369531/