将输入[提交]与文本字段对齐

Question

我是一名CSS / HTML新手，并试图对此进行研究，但我很难过。我见过有类似问题的其他人，但他们的提交按钮和文字字段只是略微错位。我是垂直的，但我希望它是水平的。 我尝试将display：inline-block添加到文本字段和提交按钮元素，但它没有解决问题。

以下是表单的嵌入代码：

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://julienkozak.us14.list-manage.com/subscribe/post?
u=f46b7a895f8d332e0127067ad&amp;id=4fbc88f22f" method="post" id="mc-
embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" 
target="_blank" novalidate>
<div id="mc_embed_signup_scroll">

<div class="mc-field-group">

<input type="email" value="" name="EMAIL" class="required email" id="mce-
EMAIL" placeholder="e-mail address">
</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>    <!-- real people should not fill this in and expect good things - 
do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input 
type="text" name="b_f46b7a895f8d332e0127067ad_4fbc88f22f" tabindex="-1" 
value=""></div>
<div class="clear" ><input type="submit" value="Get Updates" 
name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

<!--End mc_embed_signup-->

您看到的其余代码是CSS：

/* MAILCHIMP top form  */
#mc_embed_signup {

text-align: center;
width: 300px;

}

/* Styles the header text above the inputs */
#mc_embed_signup h2 {
font-size: 18px;
margin: 0 0 20px;
color: #000000;
text-align: center;
}

/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
padding: 10px 0;
}

/* Styles the input boxes */
#mc_embed_signup  input {
width: 200px;
background: white;
height: 40px;
border-radius: 0px;
display: inline-block;
}

/* Styles the subscribe button */
#mc_embed_signup .button {
background-color: gray;
color: #ffffff;
margin: 0 auto;
width: 100px;
height: 40px;
display: inline-block;
}

julienkozak.com/表单位于此页面顶部。 非常感谢你对我的耐心。

Answer 1

你考虑过使用bootstrap吗？

您还可以使用bootstrap的行功能将div标记的字段动态设置为页面的某个部分。这样做的另一个好处是可以使您的页面对各种屏幕和监视器做出响应。

Answer 2

您可以使用display：flex在包装div mc_embed_signup_scroll上使用flexbox。我将margin-top：10px放在按钮上，使其与输入字段对齐。

＆＃13;

＆＃13;

/* MAILCHIMP top form  */

#mc_embed_signup {
  text-align: center;
  width: 300px;
}


/* Styles the header text above the inputs */

#mc_embed_signup h2 {
  font-size: 18px;
  margin: 0 0 20px;
  color: #000000;
  text-align: center;
}


/* Adds extra space around the input boxes */

#mc_embed_signup .mc-field-group {
  padding: 10px 0;
}


/* Styles the input boxes */

#mc_embed_signup input {
  width: 200px;
  background: white;
  height: 40px;
  border-radius: 0px;
  
}


/* Styles the subscribe button */

#mc_embed_signup .button {
  background-color: gray;
  color: #ffffff;
  margin: 0 auto;
  width: 100px;
  height: 40px;
  margin-top:10px;

}

#mc_embed_signup_scroll{display:flex}

＆＃13;

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="https://julienkozak.us14.list-manage.com/subscribe/post?
u=f46b7a895f8d332e0127067ad&amp;id=4fbc88f22f" method="post" id="mc-
embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

      <div class="mc-field-group">

        <input type="email" value="" name="EMAIL" class="required email" id="mce-
EMAIL" placeholder="e-mail address">
      </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>
      <!-- real people should not fill this in and expect good things - 
do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f46b7a895f8d332e0127067ad_4fbc88f22f" tabindex="-1" value=""></div>
      <div class="clear"><input type="submit" value="Get Updates" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;