html - 在 Firefox 中将输入与按钮对齐

Question

我在对齐常规 <button> 时遇到问题在 Firefox 中的输入旁边。我在 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

从 .university 中移除 display: block。 fiddle :http://jsfiddle.net/gf9Tr/