Позиционирование кнопки отправки по форме html

Question

Я пытаюсь понять, как позиционировать кнопку «отправить» на простой форме отправки электронной почты html справа от поля представления, а не под полем. Эта форма собирается подключиться к моему списку рассылки Mailchimp, так что когда кто-то входит в их электронную почту, он сразу же добавляется в Mailchimp. Вот что я до сих пор. Очень ценю помощь.

<!-- Begin MailChimp Signup Form --> 
<link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css"  rel="stylesheet" type="text/css"> 
<style type="text/css"> 
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 
/* 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="http://buzzpoint.us6.list-manage1.com/subscribe/post? u=dc0ba2324b61f63ec1128f785&amp;id=126599f6a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
<div class="mc-field-group"> 
<label for="mce-EMAIL"> <span class="asterisk"></span> 
</label> 
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> 
</div> 
<div id="mce-responses" class="clear"> 
    <div class="response" id="mce-error-response" style="display:none"></div> 
    <div class="response" id="mce-success-response" style="display:none"></div> 
</div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
</form> 
</div> 

<!--End mc_embed_signup--> 

Answer 1

Подождите, пожалуйста, зайдите в html-адрес электронной почты?

Если это вам необходимо, подумайте над переписыванием html в таблицы, чтобы он работал на большинстве клиентов (проверьте в Outlook 07, если вы мне не верите).

Также любая форма не будет работать в html-письме из-за наличия блоков для защиты конечных пользователей. Пожалуйста, подумайте о том, чтобы изменить это как ссылку «Зарегистрироваться сейчас с FooBar». и затем заполните форму на веб-странице. В лучшем случае вы получите минимальную форму завершения, потому что пользователи не используются для заполнения форм внутри самих писем.

С точки зрения вашей исходной проблемы вы можете попробовать использовать свойства float и margin-right css для правильной установки кнопки. Проверьте это jsfiddle.

<input style="float:right; margin-right:12px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 

Answer 2

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button pull-right"> 

Класс "выдвижное право" принадлежит Bootstrap.

Answer 3

Способ 1: Почему вы не используете простой селектор css id для размещения вашей кнопки. Способ 2: используйте webkit box, чтобы выровнять по горизонтали вашу кнопку. Способ 3: вы также можете сделать таблицу с границей 0 для размещения вашей кнопки.

Answer 4

<!-- Begin MailChimp Signup Form --> 
<link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css"  rel="stylesheet" type="text/css"> 
<style type="text/css"> 
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 
    /* 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" style="position: relative;"> 
    <form action="http://buzzpoint.us6.list-manage1.com/subscribe/post? u=dc0ba2324b61f63ec1128f785&amp;id=126599f6a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div class="mc-field-group"> 
     <label for="mce-EMAIL"> <span class="asterisk"></span> 
     </label> 
     <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="width: 80%;"> 
     <input style="width: 15%; float: right; margin-top: -32px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
     </div> 
     <div id="mce-responses" class="clear"> 
     <div class="response" id="mce-error-response" style="display:none"></div> 
     <div class="response" id="mce-success-response" style="display:none"></div> 
     </div> 
     <div class="clear"> 
    </div> 
    </form> 
</div>