我正在尝试使用Bootstrap 3实现如下截图所示的效果.
如您所见,搜索按钮是:
1)输入内部
2)用glyphicon设计,以便不像“按钮”.
如何使用Bootstrap 3实现类似的效果?我想在文本输入的末尾放置一个带放大镜glyphicon的按钮,但是按钮不断出现在输入下方而不是内部.
解决方法
一个包含div的位置:relative;然后使用position:absolute;将提交按钮定位在顶部.像这样:
HTML
<form> <div id="search"> <input type="text" /> <button type="sutmit">Search</button> </div> </form>
CSS
#search { position: relative; width: 200px; } #search input { width: 194px; } #search button { position: absolute; top: 0; right: 0; margin: 3px 0; }