如何水平顯示這些輸入字段？

Question

我創建了標準的mailchimp表單，它可以垂直顯示錶單元素。我希望它們彼此相鄰，以便Email文本輸入字段位於提交輸入字段旁邊，位於同一行。

不幸的是，我似乎找不到正確的選擇器。 JSFiddle演示

#mc_embed_signup .mce-EMAIL, #mc_embed_signup .mc-embedded-subscribe, .mc-field-group, #mce-responses, #mce-input1 { 
 
    display: inline-block; 
 
}

<!-- Begin MailChimp Signup Form --> 
 
<div id="mc_embed_signup"> 
 
    <form action="//farmhelden.us11.list-manage.com/subscribe/post?u=2e8aace70e8db891af7a653f9&amp;id=98d670e415" 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" style="width: 33%; line-height: 1.2"> 
 
       <input type="email" value="" placeholder="Email-Adresse..." 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> 
 
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 
      <div> 
 
       <input type="text" name="b_2e8aace70e8db891af7a653f9_98d670e415" tabindex="-1" value=""> 
 
      </div> 
 
      <div class="clear"> 
 
       <input type="submit" value="Anmelden" name="subscribe" id="mc-embedded-subscribe" style="width: 23%; height: 20px;"> 
 
      </div> 
 
     </div> 
 
    </form> 
 
</div> 
 

 

 
<!--End mc_embed_signup-->

Answer 1

你是你選擇的ID和班級混合起來。 ID選擇符以#符號開頭，而類別選擇符以.符號開頭。這將這樣的伎倆：

#mce-responses { 
 
    display: none; 
 
} 
 

 
.mc-field-group, #mce-responses + div { 
 
    display: inline-block; 
 
}

<div id="mc_embed_signup"> 
 
    <form action="//farmhelden.us11.list-manage.com/subscribe/post?u=2e8aace70e8db891af7a653f9&amp;id=98d670e415" 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" style="width: 33%; line-height: 1.2"> 
 
       <input type="email" value="" placeholder="Email-Adresse..." 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> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 
      <div> 
 
       <input type="text" name="b_2e8aace70e8db891af7a653f9_98d670e415" tabindex="-1" value=""> 
 
      </div> 
 
      <div class="clear"> 
 
       <input type="submit" value="Anmelden" name="subscribe" id="mc-embedded-subscribe" style="width: 23%; height: 20px;"> 
 
      </div> 
 
     </div> 
 
    </form> 
 
</div> 
 

 

 
<!--End mc_embed_signup-->

（有因的width: 33%;您的內嵌樣式的兩個輸入端之間的空間）