使按钮在引导程序中充当跨度

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/