Question

如何在同一条线路上将我的电子邮件输入和提交按钮放在一起？

我已尝试添加：display: inline-block但它似乎无法正常工作？

URL： https://www.moneynest.co.uk/641-2/

代码

    <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 />

Answer 1

使用FlexBox是满足此类要求的最佳方法，不仅因为它可以解决您的问题，而且您还可以忘记您的设备是横向还是纵向定向。

试试这个：

＆＃13;

.row-container{
  display: flex;
  row-direction: row;
}

＆＃13;

<div class="row-container">
<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>

＆＃13;

Answer 2

您有一个挂起的<br>标记，会在您的内容中添加一个空白行。

e.g。＆GT;浏览器告诉此输入字段后面的所有内容都应该在新行上。

这个＆＃34;修复＆＃34;对于垃圾邮件机器人说你的输入应该在<p>标签内，我认为这不是有效的。

<div id="mc_embed_signup_scroll" style="margin-left: 30px;">
    <p> <input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required="" type="email">
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    </p>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value="" type="text"></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>
    <hr>
 </div>

还有一个ID为#mc_embed_signup的div，其中width: 300px为硬编码。这将不允许你将这些元素放在同一行而不会使它们溢出容器。

Answer 3

你在div之外有输入标签这里是修复使用下面的代码。

<div>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value="">
    <button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course</button>
    </div>

Answer 4

输入字段为float: left

#mce-EMAIL {
  float: left;
  }

<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>
    </div>

Answer 5

或者，您可以使用<table>

<table> <th>   
 <td><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required></td>

    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<td>
    <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>
</td></th></table>
</form>
</div>
<hr />

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

5 个答案: