对齐订阅表单

时间:2015-10-29 16:38:55

标签: html css forms twitter-bootstrap

我试图将订阅表单对齐到精选图片下方。我使用了在codepen.io上找到的订阅表单,我不确定如何定位此表单。我添加了html和css。如果有人能帮助我,我会非常感激。提前致谢。

当前输出:



 #mc_embed_signup {
   background: none;
   font: 14px Helvetica, Arial, sans-serif;
   margin: 500px;
   padding: 0;
 }
 .email_capture--wrapper {
   max-width: 600px;
   display: block;
   margin: 5% -70px;
   padding: 0 15px;
 }
 .mailchimp {
   width: 100%;
 }
 .mailchimp input[type="email"] {
   background: #f5f5f5;
   height: 55px;
   padding: 18px 20px;
   font-size: 20px;
   margin-bottom: 15px;
   border: none;
   outline: none;
   color: #444;
   float: left;
   -webkit-appearance: none;
   -webkit-border-radius: 4px 0px 0px 4px;
   -moz-border-radius: 4px 0px 0px 4px;
   border-radius: 4px 0px 0px 4px;
   -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);
 }
 .mailchimp input[type="submit"] {
   font-size: 18px;
   height: 55px;
   float: left;
   -webkit-border-radius: 0px 4px 4px 0px;
   -moz-border-radius: 0px 4px 4px 0px;
   border-radius: 0px 4px 4px 0px;
 }
}
@media (max-width: 767px) {
  .mailchimp .form-group > input[type="email"] {
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
  }
  .mailchimp .form-group > input[type="submit"] {
    width: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}

<div class="pull-right">
  <!-- Navigation -->
  <nav class="navbar navbar-fixed-top pull-right">
    <div class="container">
      <!-- Begin MailChimp Signup Form -->
      <link href="..." rel="stylesheet" type="text/css">
    </div>
  </nav>
</div>
</div>
<!--end of pull-right -->

<div id="mc_embed_signup">
  <form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <label for="mce-EMAIL"></label>
      <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div id="signup">
        <input type="text" name="..." tabindex="-1" value="">
      </div>
      <div>
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
    </div>
  </form>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案