修复输入字段内提交按钮的响应位置答案

【问题标题】：Fixing the responsive position of submit button within the input field修复输入字段内提交按钮的响应位置
【发布时间】：2020-06-27 18:46:30
【问题描述】：

我试图通过使其始终固定在输入字段中来保持提交按钮的位置响应。它在 1440px 的分辨率以下看起来很好，但是当我开始增加屏幕的分辨率时，它根本没有响应，因为按钮字面上保持在页面上的相同位置并且它不会停留在内部并跟随随着屏幕分辨率缩放的输入字段。

为了您的视觉参考，这是我正在努力制作的设计图片：design image for desktop、design image for mobile。

这是我正在处理我的CodePen的这个项目的链接。

这是我正在使用的代码：

form {
  display: flex;
  margin-top: 8%;
  position: relative;
}

.email-field {
  border: 0;
  padding: 0 5%;
  width: 400px;
  height: 50px;
  border: 1px solid hsla(0, 16%, 70%, .5);
  border-radius: 50px;
  font-family: "Josefin Sans", sans-serif;
  background: transparent;
}

.email-field:focus {
  outline: none;
  box-shadow: 0 0 10px hsl(0, 93%, 68%);
}

#submit-btn {
  width: 90px;
  height: 50px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  background-color: hsl(0, 74%, 74%);
  outline: none;
  transition: 400ms;
  overflow: visible;
  position: absolute;
  right: -1em;
  cursor: pointer;
  transition: 0.6s;
}

/* HOVER & ACTIVE STATES */
#submit-btn:hover {
  transform: translateX(20px);
  background: linear-gradient(135deg, hsl(0, 100%, 96%), hsl(0, 80%, 86%));
}

#submit-btn:active {
  background: #EE8C8C;
}

<form action="/submit.php" method="POST">
  <div>
    <input class="email-field" name="email" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="Your email address...">
    <p class="error-message success-message"></p>
  </div>

  <button id="submit-btn" type="submit">
    <img src="https://assets.codepen.io/4417738/icon-arrow_2.svg" alt="right arrow icon">
  </button>
</form>

【问题讨论】：

标签： html css forms button input

【解决方案1】：

您可以使用 from display:inline-flex; 代替 display:flex；

【讨论】：

@Bern 这对你有帮助吗？
是的！我认为解决方案会比将其更改为 display: inline-block 更复杂。非常感谢，我非常感谢这个简单而简洁的解决方案！我已经通过谷歌搜索，我已经阅读了无数的文章和其他论坛，但仍然无法弄清楚，直到现在：D
糟糕，刚刚发现一个错字。我的意思是display: inline-flex。