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

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-input类的飞行字体大小，填充和边距，并且能够立即更改按钮图像到另一个图像（具有另一个高度和宽度），以便输入文本和按钮仍然垂直居中，因此输入文本不会覆盖按钮。

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

但我仍然有一个问题：当我为.subscribe-input类设置垂直填充或边距时，图像被拉伸：

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

如何更改.subscribe-input的边距和填充而不拉伸图像？

Answer 1

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

然后是你的问题：有一个名为align-items的flex-propety，它会将flex-container的项目与主轴垂直对齐。在这里，您必须提供表格align-items: center。

我发现this guide from css-tricks非常适合理解flex。