我正在尝试设计一个表单,在文本框中有一个按钮.我希望该按钮位于文本框内.这是我尝试的方式:
<div class="row"> <div class="col-sm-6"> <div class="form-group required"> <label for="PickList_Options" class="col-sm-4 control-label">Options</label> <div class="col-sm-4 buttonwrapper"> <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> <button>GO</button> </div> </div> </div> <div class="col-sm-6"> <div class="result" id="mydiv"></div> </div> </div>
我的css:
.buttonwrapper { display:inline-block; } input,button { background-color:transparent; border:0; }
但问题是,Go按钮位于文本框下方.我该怎么办才能把它放在文本框内?
我希望“Go”按钮位于文本框内.
解决方法
.buttonwrapper { display: inline-block; } input{ background-color: transparent; border: 2px solid black; } button { margin-left: -50%; border: none; background-color: transparent; }
<div class="row"> <div class="col-sm-6"> <div class="form-group required"> <label for="PickList_Options" class="col-sm-4 control-label">Options</label> <div class="col-sm-4 buttonwrapper"> <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> <button>GO</button> </div> </div> </div> <div class="col-sm-6"> <div class="result" id="mydiv"></div> </div> </div>
原文地址:https://www.jb51.cc/html/226130.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。