如何将“订阅”按钮和“电子邮件输入”置于同一行?

时间:2019-06-11 19:42:20

标签: html css wordpress forms mailchimp

我想在同一行中输入和订阅按钮。

我尝试将display:inline-block;在我的css代码中,就像一些堆栈溢出的用户所建议的那样,但是它保持不变

    <!-- Mailchimp for WordPress v4.5.2 - https://wordpress.org/plugins/mailchimp-for-wp/ -->
    <form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-195 mc4wp-form-theme mc4wp-form-theme-dark customize-unpreviewable" method="post" data-id="195" data-name="formu footer" style="display: inline-block;">
    <div class="mc4wp-form-fields">
        <p> 
            <input placeholder="Escribi tu email" required="">
            <input type="submit" value="Enviar" style="/* display: inline; */">
        </p>
    </div>
    <label style="display: none !important;">Leave this field empty if you're human: 
        <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off">
    </label>
    <input type="hidden" 
    <!-- / Mailchimp for WordPress Plugin -->

``

Now I have the suscribe button under the input email, but I want it to have it at the same line

1 个答案:

答案 0 :(得分:0)

我为您整理了一些代码,并关闭了一些丢失的标签,并删除了Honeypot(应该可以通过Mailchimp插件自动插入)。上面的代码在某些地方非常分散,因此尚不清楚主要问题可能是什么,但这是可行的:

https://jsfiddle.net/aoking/d14pnwsL/

<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-195 mc4wp-form-theme mc4wp-form-theme-dark customize-unpreviewable" method="post" data-id="195" data-name="formu footer">
  <div class="mc4wp-form-fields">
    <p>
      <input placeholder="Escribi tu email">
      <input type="submit" value="Enviar">
    </p>
  </div>
</form>