css - 内联文本字段和输入不对齐

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

Working Demo