埋め込みMailChimpフォームで同じ行に電子メールフィールドと送信ボタンを表示する方法

Question

私はWordPress Webサイトを持っていて、私のテーマのある生のHTMLウィジェットを使ってサイトのフッターにMailChimp電子メールサインフォームを追加しようとしていますページビルダー。

私は電子メールフィールドと送信ボタンを同じ行にしたいと思っていますが、私はこれを動作させることはできません。私はこのサイトとGoogleで見つけたいくつかのソリューションを試しましたが、運はありません。

ここに私のフォームコードがあります。私はここでフィールドとボタンを同じ行にするためにここに追加する必要があることを知っていますか？

<!-- Begin MailChimp Signup Form --> 
<style type="text/css"> 
#mc_embed_signup{background:#1b1d1f; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;} 
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ 
</style> 
<div id="mc_embed_signup"> 
<form action="https://origami.us11.list-manage.com/subscribe/post?u=c46543dec276193775d525c9f&amp;id=85cb8a5e0e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
<div id="mc_embed_signup_scroll"> 

<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_c46543dec276193775d525c9f_85cb8a5e0e" tabindex="-1" value=""></div> 
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn border-width-0 btn-accent btn-round btn-flat btn-icon-left"></div> 
</div> 
</form> 
</div> 
<!--End mc_embed_signup--> 

それは私が働いているサイトはここにあるのに役立ちます場合：http://origamidotme.staging.wpengine.comフォームはサイトの一番下にあります。

私はこれを助けてくれてありがとうございました。それは私を夢中にしています。

Answer 1

ボタンがブロックレベルの要素として使用されており、これが問題の原因です。下記を参照してください：

#mce-EMAIL { 
    display:inline-block; 
    float:left; 
    margin: 6px 20px 0 0; 
} 

これは、両方のボタンを並べて配置します。