Html 电子邮件输入和提交按钮在同一行？

我如何才能在同一行上获得电子邮件输入和提交按钮

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

我尝试添加：

display:inline块

，但似乎不起作用

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

网址：

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

代码

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

把课程发给我！

您有一个挂起的

标记，可以在内容中添加一个空行

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

e、 g.>浏览器告诉您，此输入字段之后的所有内容都应位于新行

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

这个垃圾邮件机器人的“修复程序”说你的输入应该在

标签中，我认为这是无效的

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

把课程发给我！

还有一个id为

#mc_embed_signup

的div，其宽度为

300px

硬编码。这将不允许您在不使这些元素溢出其容器的情况下将它们放在同一行上

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

您在div之外有输入标记，下面是使用此代码的修复程序

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

把课程寄给我

在输入字段上使用

浮动：左

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

#mce电子邮件{
浮动：左；
}

把课程发给我！

或者，您可以使用

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

把课程发给我！

使用是满足此类需求的最佳方法，不仅因为它将解决您的问题，而且您将能够忘记您的设备是横向还是纵向的

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

试试这个：

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

.row容器{
显示器：flex；
行方向：行；
}

把课程发给我！

谢谢，您到底更改了什么？在您的

标记之后，有一个断开空间标记

谢谢，我在代码中看不到这个？也许是Wordpress添加了它？通常，当您在网站上使用一些富文本编辑器时，当您点击

Enter

进入新行时，它们会自动添加

标记。记住这一点很好。另外，还有一些布局问题，这是由特定容器中的其他对象引起的。尝试将

mc\u embed\u signup\u scroll

的宽度设置为。。500像素，看看会发生什么。我想这需要重写一下。看看你的包含div/表单。我认为宽度完全被电子邮件输入框占据了。尝试过这个，但没有成功？如果我运行代码段，它可以工作。。。这是为你做的吗？他正在使用一个定制的预构建Wordpress主题，所以我不认为这些类型的操作会对他有好处，除非他确定需要做哪些更改。