在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

<!-- 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>

Answer 3

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

“pull-right”类属于Bootstrap。

Answer 4

方法1：为什么不使用简单的css id选择器来定位按钮。 方法2：使用webkit框水平对齐按钮。 方法3：您还可以创建一个带0边框的表来定位您的按钮。