html表单上提交按钮的定位

我正在尝试找出如何将简单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-->

#mc_embed_注册{背景：fff；清除：左；字体：14px Helvetica，Arial，无衬线；}
/*在站点样式表或此样式块中添加您自己的MailChimp表单样式替代。
我们建议将此块和前面的CSS链接移动到HTML文件的头部*/

等一下。。。这是进入html电子邮件吗

如果是这样的话，你肯定需要考虑将HTML改写成表以使它在大多数客户机上工作（如果你不相信我，请在Outlook 07中查看）。 此外，任何表单都不会在html电子邮件中工作，因为存在保护最终用户的块。请考虑把它变成一个链接，比如“现在注册FooBar”，然后把你的表单放在网页上。在最好的情况下，你会得到一个极小的表单完成率，因为用户不习惯在电子邮件中填写表单

对于原始版本，您可以尝试使用

float

和

marginright

css属性来相应地定位按钮。看看这个

---

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

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

#mc_embed_注册{背景：fff；清除：左；字体：14px Helvetica，Arial，无衬线；}
/*在站点样式表或此样式块中添加您自己的MailChimp表单样式替代。
我们建议将此块和前面的CSS链接移动到HTML文件的头部*/

如果这是在html电子邮件中发送的，那么这将不起作用，因为您无法拉入外部样式表，并且样式标记无法跨客户端工作。查看此链接了解更多信息->这假设您不关心保持宽度（以及许多其他美学问题）。如果您需要固定宽度的布局，建议您采用HTML电子邮件友好的表格布局。非常感谢@zeantsoi。这可能会满足我的需要。你能告诉我如何让“订阅”文本在按钮中居中吗？它下降得更低-尝试将“行高”属性应用于“提交”按钮：

。jsFiddle这里：@JeffEvans，这解决了问题吗？如果是这样的话，那么接受这个正确的答案既有礼貌又有帮助：首先，非常感谢你的帮助！为了澄清，此表格将嵌入我们的网站以收集电子邮件。有鉴于此，您能为我澄清一下我粘贴在上面的代码中应该在哪里实现float和margin right css属性吗？@JeffEvans在我的答案中有一个jsfiddle链接，这可能会对您有所帮助。将浮动和边距添加到id为“mc embedded subscribe”的提交按钮。再次感谢。我还没有弄清楚的一件棘手的事情是如何将按钮放在表单旁边（右侧）。使用您提供的代码，除非我弄错了，否则按钮看起来仍然位于字段下方。非常感谢你的帮助。

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

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