使用input输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
看下面的例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1">
<link href="">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src=""></script>
<title>input控件组</title>
</head>
<body>
<div>
<div></div>
<div>
<div>
<h1>样式1</h1>
</div>
<div>
<input type="text">
<div>
<button type="button">搜索</button>
</div>
</div>
<div>
<h1>样式2</h1>
</div>
<div>
<input type="text">
<div>
<div>
<button type="button" data-toggle="dropdown">
下拉菜单
<span></span>
</button>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>
效果如下：
如果和input配合使用的按钮是不可单击的，只是用于文字的说明，修改如下：
<div> <input type="text"> <div>用来搜索</div> </div>
效果如下：
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：