電子メール入力と送信ボタンは同じ行にありますか？

Question

電子メールの入力と送信ボタンを同じ行に並べて表示するにはどうすればよいですか？

私は追加しようとしました：display: inline-blockしかし、それは動作していないようですか？

URL： https://www.moneynest.co.uk/641-2/

コード

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required> 
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div> 
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button> 
    </div> 
</form> 
</div> 
<hr /> 

Answer 1

あなたはあなたのコンテンツに空白行を追加しますぶら下げ<br>タグを持っています。

>ブラウザは、この入力フィールドの後のすべてが新しい行にあるはずであることを示します。

あなたの入力が<p>タグ内にあるはずだと言っているこのスパムボットの「修正」は、それが有効だとは思わない。

<div id="mc_embed_signup_scroll" style="margin-left: 30px;"> 
    <p> <input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required="" type="email"> 
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
    </p> 
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value="" type="text"></div> 
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button> 
    </div> 
    <hr> 
</div> 

ハードコードさwidth: 300pxを持って#mc_embed_signupのidを持つdiv要素もあります。それはあなたがコンテナをあふれさせることなく、同じ行にある要素を取得することを許可しません。

Answer 2

divの外側に入力タグがあります。修正は次のコードを使用してください。

<div> 
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required> 
    <input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""> 
    <button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course</button> 
    </div> 

Answer 3

ご入力フィールド上の float: leftで

#mce-EMAIL { 
 
    float: left; 
 
    }

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required> 
 
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div> 
 
<div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button> 
 
</div> 
 
    </div>

Answer 4

それとも、あなたはを使用して<table>

<table> <th> 
<td><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required></td> 

    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
<td> 
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""> 
</div> 
    <div class="clear signup"> 
<button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button> 
    </div> 
</td></th></table> 
</form> 
</div> 
<hr /> 

Answer 5

を使用することができますは、あなたの問題を解決するためだけでなく、あなたのデバイスが横向きか縦向きかを忘れることができるため、この種の要求に最も適しています。

.row-container{ 
 
    display: flex; 
 
    row-direction: row; 
 
}

<div class="row-container"> 
 
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required> 
 
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div> 
 
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button> 
 
    </div> 
 
</form> 
 
</div> 
 
<hr /> 
 
</div>