如何使用输入区域旁边的提交按钮制作自适应表单（电子邮件输入框）？

Question

我试图使自适应形式：

我设法有点让它但它是一个噩梦来编辑它，而不是真的那么自适应：

<div class="widget"> 
    <h2>Stay Tuned.</h2> 
    <div class="subscribe"> 
     <form action="" method="get"> 
      <input type="email" placeholder="Your Email" class="subscribe-input"> 
      <input type="image" src="https://i.imgur.com/7pyyReI.png" class="subscribe-image"> 
     </form> 
    </div> 
</div> 

h2 { 
    text-transform: uppercase; 
    color: #6c6969; 
    background: #f8f8f8; 
    border-left: 2px solid #58c93a; 
    padding: 17px 0 21px 20px; 
    font-weight: bold; 
    margin-bottom: 20px; 
} 

.subscribe { 
    box-sizing: border-box; 
    position: relative; 
    width: 100%; 
    height: 50px; 
} 

.subscribe-input { 
    box-sizing: border-box; 
    color: #b9b9b9; 
    font-size: 0.75em; 
    width: 100%; 
    border: 1px solid #e1e0e0; 
    padding: 20px 50px 20px 20px; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.subscribe-input::-webkit-input-placeholder { 
    color: #b9b9b9; 
} 

.subscribe-image { 
    position: absolute; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
} 

https://jsfiddle.net/cq8q0y61/

是否有解决方案易于编辑，比这个更适应？我不想强迫手动设置.subscribe类的高度，以便能够改变飞行字体大小，填充和.subscribe输入类的边距，并且能够随时更改按钮图像到另一个图像（具有另一个高度和宽度），以便输入文本和一个按钮仍然垂直居中，以便输入文本不会超过按钮。

做得更多一些挖后，我发现了如何更好使用Flex方法进行： https://jsfiddle.net/t3LLcu35/2/

但我仍然有一个问题：当我设置垂直垫衬或.subscribe输入级空间，图像被拉伸：

.subscribe-input { 
    padding: 50px 2px 50px 20px; 
} 

如何更改.subscribe输入边距和填充不拉伸的形象呢？

Answer 1

你的第二个小提琴看起来没问题，除此之外你还有display:flex的包装和表单。删除它的包装“订阅”。 （旁注：更好的是，给形式一个id或类，并在css中引用它）

然后到您的问题：有一个flex-propety调用align-items，它将对齐flex - 容器垂直于主轴。在这里你必须提供表格align-items: center。我发现this guide from css-tricks对于理解flex很不错。