入力領域の隣に送信ボタンがあるアダプティブフォーム（電子メール入力ボックス）を作成するにはどうすればよいですか？

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/

編集しやすく、これよりも適応性の高いソリューションはありますか？サブスクライブクラスの高さを手作業で設定し、サブスクライブ入力クラスのフライ・フォント・サイズ、パディング、マージンを変更できるようにし、ボタン・イメージをその場で変更できるようにしたい（別の高さと幅を持つ）別の画像を使用して、入力テキストとボタンがまだ垂直に中央に配置されているため、入力テキストがボタンを超えないようにします。 https://jsfiddle.net/t3LLcu35/2/

しかし、私はまだ問題があります：私は垂直方向のパディングまたは.subscribe入力クラスのマージンを設定し、画像が引き伸ばされ

もう少しやって掘り後、私はそれがより良いフレックスメソッドを使用して作成する方法発見しました：画像を引き伸ばすことなく、.subscribe入力のためのマージンとパディングを変更する方法

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

？

Answer 1

あなたの2番目のフィドルは、ラッパーとフォームのためにdisplay:flexを持っていること以外に、大丈夫です。ラッパー "subscribe"のためにそれを削除します。 （Sidenote：フォームをIDやクラスに与えてCSSで参照することもできます）

そして、あなたの問題には：flexというものがあります。フレックスはalign-itemsと呼ばれ、フレックス主軸に垂直な容器。ここでは、align-items: centerという形式を指定する必要があります。

フレックスを理解するのにかなり良いthis guide from css-tricksが見つかりました。