将按钮（<form>外部）放在与输入字段相同的行上？</form>

Question

这是我的html表单：

<form novalidate class="simple-form">
    <label ng-hide="tab==1">Reviews Min: <input type="number" ng-init="revNum=30" class="form-control review-input" min="0" step="10" ng-model="filterValues.revNum" /></label>
    <label>Min Price &#163;: <input type="number" ng-init="filterValues.minNum=0" class="form-control price-input" min="0" step="1000" ng-model="filterValues.minNum" /></label>
    <label>Max Price &#163;: <input type="number" ng-init="filterValues.maxNum=0" class="form-control price-input" min="0" step="1000" ng-model="filterValues.maxNum" /></label>
    <label><select class="form-control" ng-model="filterValues.currentCarType"  style="display:block;" ng-options="key for key in carTypeObj">
        <option value="">Select Type</option>
    </select></label>
</form>
<label><button class="btn btn-primary " style="display:block;" ng-click="resetNumArray(); resetActiveRow(); resetType()">reset</button></label>

这是我的css：

.simple-form label{
    margin-right: 10px !important;
}

.simple-form button{
    background-color: #31708f;  
}

.price-input {
    width: 150px !important;
}
.review-input{
    width: 100px !important;
}

这是chrome中的输出：

这是firefox中的输出：

所以我的重置按钮低于我的输入字段并选择，我需要它在同一行。但如果我在<form>内移动它，当我在输入字段中写入一些值并按Enter时，我的输入字段将重置。
另外如您所见，firefox没有正确显示我的<select>。

如何解决这些问题？

以下是两种浏览器的预期输出：

注意：我使用的是Bootstrap JSFiddle

Answer 1

http://jsfiddle.net/dsqc10du/6/

的另一个工作示例

将选择垂直对齐到表单的底部

.simple-form{
    display: inline-block;
}
.simple-form label{
    vertical-align: bottom;
}

button{
   vertical-align: top !important;
   margin-top: 20px !important;
}