在Firefox中将输入与按钮对齐

Question

我无法在Firefox中的输入旁边对齐常规<button>。我在Firefox中获得以下输出：

输入类是大学，接下来是按钮类，CSS代码如下：

.university {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-transform: uppercase;

    padding: 20px;

    width: 400px;
    display: block;

    border: none;

    color: #000;

    border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px 0px 0px 3px;

    outline-style: none;
    outline-width: 0px;
    outline-color: #000;
}

#next {
    background-color: #C44D58;

    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-transform: uppercase;

    width: 150px;

    padding: 20px;
    margin: 0;

    color: #FFF;

    border: none;

    border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    -webkit-border-radius: 0px 3px 3px 0px;

    outline-style: none;
    outline-width: 0px;
    outline-color: #000;
}

HTML是：

<div class="universityContainer">
    <input type="text" class="university typeahead" placeholder="University Name">
    <button id="next">NEXT</button>
</div>

.universityContainer的CSS是：

.universityContainer {
    display: table-cell;
    vertical-align: middle;
}

注意：应该注意的是，除了Firefox之外，它在每个浏览器中都能正确呈现。

Answer 1

从display: block移除.university。小提琴：http://jsfiddle.net/gf9Tr/

Answer 2

您可以删除display: block;，也可以在班级大学中使用display: inline-block;。

Answer 3

您需要将display:block元素上的input更改为display: inline-block。 这是一个jsbin，以显示它们正确排列。