时间戳

首页 > 解决方案 > 如何使此输入文本字段响应

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>

标签： cssresponsive-design

解决方案

像这样试试

.flex-col {
  display: flex;
  display: -webkit-flex;
}

.coupon {
  width: 100%;
  max-width: 500px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 30px;
}

.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%;
}
<div class="flex-col">
  <input type="text" class="coupon input-res">
  <button class="coupon-btn">Apply</button>
</div>

推荐阅读