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

Answer 2

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

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

<强> jsFiddle example

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>

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

3 个答案: