使按鈕在引導程序中充當跨度

Question

我有下面的表單，其中輸入內有搜索圖形。

<form method="get"> 
    <div class="input-group"> 
       <input type="text" class="form-control" id="city" name="city"/> 
       <span class="input-group-addon btn"><span class="glyphicon glyphicon-search"></span></span> 
    </div> 
</form> 

我想使我的glyphicon提交我的形式，但我不得不改變量程的輸入或按​​鈕。無論哪種方式，圖形都會出現在輸入之外並顯示在其下方。我還不明白爲什麼。我能夠通過絕對定位將其置於正確的位置，但對於它在網站中顯示的方式並不好。有沒有什麼辦法可以解決這個問題，只有用CSS和沒有絕對定位？

Answer 1

問題是引導樣式按鈕和輸入不同。您可以使用<span>並提交onclick事件。 看到這個代碼：

<form id="myForm" method="get"> 
    <div class="input-group"> 
       <input type="text" class="form-control" id="city" name="city"/> 
       <span class="input-group-addon btn" onclick="document.getElementById('myForm').submit();" ><span class="glyphicon glyphicon-search"></span></span> 
    </div> 
</form> 

工作的jsfiddle： http://jsfiddle.net/q76dasdk/