想要将 "Subscribe" 按钮浮动到输入字段的右侧

Question

我是 HTML/CSS 的新手，几个小时以来一直在尝试将 "submit" 按钮浮动到输入表单字段的右侧。我确定这是一个相对容易的修复，我似乎无法弄清楚。请帮助:)

.footer-wrapper #mc_embed_signup {
 & input {
  background-color: #000;
  border-radius: 3px;
  height: 35px;
  border: none;
  width: 100%;
  }
}

<!-- Begin MailChimp Signup Form -->
    <div id="mc_embed_signup">
    <form action="//methodpgh.us8.list-manage.com/subscribe/post?u=5a5764ee5b831b0dbfd47811f&amp;id=11148dcbc6" 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="Email Address">   <div class="clear submit-btn"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </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_5a5764ee5b831b0dbfd47811f_11148dcbc6" tabindex="-1" value=""></div>
        
        
        </div>
    </form>
    </div>
    
    <!--End mc_embed_signup-->

Answer 1

当您不希望元素两边都有内容时，可以使用clear="class"。 class 停止按钮以对齐到输入字段的右侧。我确实删除了它，所以它现在可以工作了。 :)

.footer-wrapper #mc_embed_signup {
 & input {
  background-color: #000;
  border-radius: 3px;
  height: 35px;
  border: none;
  width: 100%;
  }
}

<!-- Begin MailChimp Signup Form -->
    <div id="mc_embed_signup">
    <form action="//methodpgh.us8.list-manage.com/subscribe/post?u=5a5764ee5b831b0dbfd47811f&amp;id=11148dcbc6" 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="Email Address">   <input 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>    <!-- 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_5a5764ee5b831b0dbfd47811f_11148dcbc6" tabindex="-1" value=""></div>
        
        
        </div>
    </form>
    </div>
    
    <!--End mc_embed_signup-->

想要将 "Subscribe" 按钮浮动到输入字段的右侧

Want to float the "Subscribe" button to the right of the input field

html

css

forms

field

mailchimp