在所有浏览器中内联呈现表单输入字段

Question

我想将内嵌表单文本输入字段和提交按钮内嵌（如Chrome所示）：

我通过应用这些规则（简化标记和css）实现了预期的定位：

HTML：

<form>
    <div class="wrapper">
        <input class="email-input" type="email">
    </div>
    <input class="submit-btn" type="submit" value="Join now">
</form>

CSS：

.wrapper {
  display: inline-block;
}

然而，在Firefix（31.0）上我得到了这个：

我使用的CSS规则和标记非常简单，但它们都失败了。

如何在所有浏览器中正确渲染表单？

Answer 1

如果您不需要div，请将其删除并将id或class添加到input以用于CSS选择器，然后inline-block {{1} }}

对于HTML代码，如果需要，垂直对齐输入，也会垂直对齐包装。

input

可选：我还建议在第一时间重置CSS。