如何将“订阅”按钮和“电子邮件输入”放在同一行？答案

【问题标题】：How to put "suscribe"button and "email input" in the same line?如何将“订阅”按钮和“电子邮件输入”放在同一行？
【发布时间】：2019-10-26 06:58:46
【问题描述】：

我希望输入和订阅按钮在同一行。

我试着把 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

【问题讨论】：

一件事，永远不要将 CSS 直接放入 HTML。
请重新排序您的代码，缩进并关闭未关闭的标签。不可读。
我已经在我的开发网站上测试过你的代码，看截图>>prntscr.com/o0m23q输入框和订阅按钮在同一行，你可以尝试清除缓存吗？
小修正

标签： html css wordpress forms mailchimp

【解决方案1】：

我已经为您整理了一些代码并关闭了一些缺失的标签并删除了蜜罐（应该可以通过 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>

【讨论】：