在HTML表单上提交按钮的位置

我想弄清楚如何在提交字段的右侧，而不是字段下方的简单HTML电子邮件提交表单上定位“提交”按钮。这个表单将连接到我的Mailchimp电子邮件列表，这样当有人输入他们的电子邮件时，它会立即被添加到Mailchimp。这是迄今为止我所拥有的。真的很感谢帮助。在HTML表单上提交按钮的位置

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

来源

2013-03-12 Jeff Evans

等一下......这是要进入一个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">

来源

2013-03-12 07:50:44 Undefined

首先，非常感谢您的帮助！为了澄清，此表格将嵌入我们的网站收集电子邮件。鉴于此，你能否澄清我粘贴在浮动代码之上的代码以及应该实施的保证金 - 正确的css属性？ – 2013-03-12 08:09:56

@JeffEvans我的答案上有一个jsfiddle链接，可以帮助你。您的提交按钮的浮动和边距为“mc-embedded-subscribe”。 – Undefined 2013-03-12 08:33:03

再次感谢。我一直无法弄清楚的棘手的事情是我如何获得表单旁边的按钮（右侧）。随着你提供的代码，除非我错了，它看起来像按钮仍然在领域之下。非常感谢您的帮助。 – 2013-03-12 08:36:50

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

班 “拉权” 属于逼近。

来源

2013-03-12 07:51:41 dikkini

如果这是在一个html电子邮件中，这不会工作，因为你不能拉外部样式表和样式标签不工作跨客户端。看看这个链接的更多信息 - > http://www.campaignmonitor.com/blog/post/1935/a-guide-to-css-support-in-emai – Undefined 2013-03-12 07:53:00

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

来源

2013-03-12 07:52:26 Nishank

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

来源

2013-03-12 08:02:27 zeantsoi

这假定你不关心保持宽度（以及其他一些美学问题）。如果你需要一个固定宽度的布局，你最好建议采用HTML电子邮件友好的表格布局。 – zeantsoi 2013-03-12 08:04:01

非常感谢@zeantsoi。这可能会为我所需要的窍门。你能告诉我，我怎么能让“订阅”文本在按钮中居中？它降低了 - http://screencast.com/t/bLOQXv1svTB – 2013-03-12 08:22:55

尝试将line-height属性应用于提交按钮：''。 jsFiddle here：http://jsfiddle.net/3kfuC/ – zeantsoi 2013-03-12 16:07:28

在HTML表单上提交按钮的位置

回答

相关问题