div内のlabel、input、および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. あなたは、インラインCSSを削除class="form-inline"
2. で<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>