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提交我的表单，但为此，我必须更改输入或按钮的范围。无论哪种方式，glyphicon都会进入输入之外并显示在其下方。我还无法弄明白为什么。我能够通过绝对定位把它放在正确的位置，但这对它在网站上的显示方式来说并不好。有没有办法只用css和没有绝对定位来解决这个问题？

Answer 1

问题是bootstrap样式按钮和输入有所不同。您可以使用<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/

Make按钮在bootstrap中充当span

1 个答案: