内联文本框和输入不对齐

Question

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

<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>

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

http://jsfiddle.net/gq2279j2/4/

Answer 1

用你的风格.add-new-customer{vertical-align: top;}试试这个

工作演示

Answer 2

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

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

jsFiddle实例

Answer 3

使用此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>