我正在尝试使用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; }
原文地址:https://www.jb51.cc/html/226072.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。