我的搜索欄顯示奇怪

Question

我似乎無法弄清楚爲什麼我的搜索按鈕跳轉到第二行。據我所知，我只把它設置爲一行（45px）厚，而忽略了這一點。請幫助？

http://www.bootply.com/EwP07rHc52

忘了補充我使用的積極改變按鈕外觀的腳本。

$(document).ready(function(){ 
     // select element styling 
     $('select.select').each(function(){ 
      var title = $(this).attr('title'); 
      if($('option:selected', this).val() != '' ) title = $('option:selected',this).text(); 
      $(this) 
       .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'}) 
       .after('<span class="select">' + title + '</span>') 
       .change(function(){ 
        val = $('option:selected',this).val(); 
        $(this).next().text(val); 
        }) 
     }); 
}); 

Answer 1

您在代碼中有空格，你的輸入元素被設置爲顯示爲inline-block和無法正常浮動。這就是導致在Dev Tools中沒有顯示的額外空間的原因。

如果您將float: center更改爲float: left那個.summonerSearch元素，那就沒問題了。

見這裏：http://www.bootply.com/ZIsn1phtco