內聯文本字段和輸入不對齊

我正在實施內聯表單。用戶可以搜索現有客戶或添加新客戶。內聯文本字段和輸入不對齊

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

來源

2014-10-20 Kev

請加：'。 add-new-customer {vertical-align：top; }'。 – emmanuel 2014-10-20 13:28:41

@emmanuel我想你是第一個。請把你的答案。 – Kev 2014-10-20 13:45:20

不需要，已經有3個優秀的答案！ – emmanuel 2014-10-20 13:46:50

與你的風格試試這個.add-new-customer{vertical-align: top;}

Working Demo

來源

2014-10-20 13:29:47 Benjamin

設置爲頂部的按鈕的垂直對齊方式：

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

jsFiddle example

來源

2014-10-20 13:30:01 j08691

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

來源

2014-10-20 13:32:34

內聯文本字段和輸入不對齊

回答

相關問題