在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邊框的表來定位您的按鈕。