如何对齐电子邮件字段旁边的订阅按钮？答案

【问题标题】：how to align subscribe button next to email field?如何对齐电子邮件字段旁边的订阅按钮？
【发布时间】：2019-02-21 23:43:33
【问题描述】：

在此页面上：http://growthbay.ch/

我有一个小的电子邮件字段和嵌入的订阅按钮，但我想在电子邮件输入字段旁边显示订阅按钮，并在订阅按钮左侧留出一点边距。

我正在使用此代码：

<label><strong>Get the latest jobs in your inbox!</strong></label>
<input style="width:auto !important" type="email" name="EMAIL" placeholder="your@email.com" required />
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe" />

我做错了什么？

谢谢大家！桑德罗

【问题讨论】：

有很多方法可以并排对齐 - 现在构建的网站中最常见的可能是 flexbox、grid 或 bootstrap。请将您网站中的实际 CSS 添加到您的 sn-p 中，以便我们更好地了解您网站的情况（外部链接永远不会永久存在）。

标签： html css forms

【解决方案1】：

在你的 CSS 中尝试 display: inline-block; 而不是 display:block

【讨论】：

谢谢贝萨特！不幸的是，这没有做任何事情：-/

【解决方案2】：

我相信您在电子邮件字段中错过了display: inline-block。只需添加它，它应该可以工作！

另外（尽管与您的问题无关），您没有以正确的方式将样式应用于“订阅”按钮：您所拥有的是

<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe"/>

应该是这样的：

<input style="display: inline-block; position: relative; margin-left: 5px; vertical-align: top;" type="submit" value="Subscribe"/>

不过，一般来说，我建议使用外部 CSS 并使用类引用您的元素。

让我知道它是否有效！

【讨论】：

您好 Damiano，非常感谢您的回答。不幸的是，这没有帮助。第二个技巧已实现；-) 还有其他想法吗？
@SandroMeyer 嗯，据我所知，代码根本没有改变。不幸的是，我并不是真正的 WordPress 大师，所以我无法为您提供很多帮助。