如何在div中水平对齐标签，输入和i元素？

Question

我正在尝试使用bootstrap搜索图标创建文本输入。但是标签，输入元素和搜索图标都出现在不同的行中。我在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. 您应该使用<form>
添加class="form-inline"
2. 删除内联css。使用适当的课程。 See this example
＆＃13;
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div id="filterDiv2" class="container row">
					<div id="countryDiv" class="right-inner-addon form-group col-xs-8">
						<label style="display: inline-block" for="billingCountryDiv">Country:</label>
						<input id="countryId" type="text" class="form-control" style="display: inline-block;width: auto;"/>
						<i class="glyphicon glyphicon-search" style="display: inline-block"></i>
					</div>
          </div>
＆＃13;
＆＃13;
＆＃13;