Css 内联文本字段和输入don'；不要排队

我正在实现一个内联表单。用户可以搜索现有客户或添加新客户

<div id="CustomerInfo">
    <div class="display-field roomy">
        <div id="customerInfoContainer">
            <div class="addCustomerControlsContainer">
                <span class="twitter-typeahead" style="position: relative; display: inline-block;"><input type="text" class="autocompleteinput tt-query" placeholder="Type to search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: rgba(0, 0, 0, 0);"></span>
                <input class="add-new-customer" title="Add New Customer" type="button" value="+">
            </div>
        </div>
    </div>
</div>

有人知道为什么我的两个元素不一致吗

---

用你的风格试试这个

。添加新客户{vertical align:top；}

---

将按钮的垂直对齐设置为顶部：

.add-new-customer {
    vertical-align:top;
}

使用此CSS：

.display-field.roomy, .editor-field.roomy {
line-height: inherit;
}

而不是下面的CSS：

.display-field.roomy, .editor-field.roomy {
line-height: 1.9;
}

并将两个按钮放置在同一范围内：

<span class="twitter-typeahead" style="position: relative; display: inline-block;">
  <input type="text" class="autocompleteinput tt-query" 
       placeholder="Type to search" autocomplete="off" spellcheck="false" dir="auto" 
       style="position: relative; vertical-align: top; background-color: rgba(0, 0, 0, 0);">
  <input class="add-new-customer context-button noarrow" title="Add New Customer" type="button" value="+">
</span>

请添加：

。添加新客户{vertical align:top；}

@emmanuel我想你是第一个。请把你的答案。不需要，已经有3个很好的答案了！