如何水平對齊div中的標籤，輸入和i元素？

Question

我正在嘗試使用引導程序搜索圖標創建文本輸入。但是，標籤，輸入元素和搜索圖標都顯示在不同的行中。我正在嘗試在Firefox最新版本中。

Here是JSFiddle鏈接。以下是相同的代碼。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="div1" class="container row"> 
 
    <div id="countryDiv" class="right-inner-addon form-group col-xs-4"> 
 
    <label style="display: inline-block" for="billingCountryDiv">Country:</label> 
 
    <input id="countryId" type="text" class="form-control" style="display: inline-block"/> 
 
    <i class="glyphicon glyphicon-search" style="display: inline-block"></i> 
 
    </div> 
 
</div>

Answer 1

還有許多東西需要照顧，但我有固定您的問題。

編輯：

1. 你應該class="form-inline"
2. 刪除內聯CSS添加<form>。使用適當的類。 See this example

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div id="filterDiv2" class="container row"> 
 
\t \t \t \t \t <div id="countryDiv" class="right-inner-addon form-group col-xs-8"> 
 
\t \t \t \t \t \t <label style="display: inline-block" for="billingCountryDiv">Country:</label> 
 
\t \t \t \t \t \t <input id="countryId" type="text" class="form-control" style="display: inline-block;width: auto;"/> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-search" style="display: inline-block"></i> 
 
\t \t \t \t \t </div> 
 
      </div>