input框中内嵌button按钮
用途
常见的使用场景就是input框中输入手机号然后发送验证码
实现
-
大致框架
<div class="container"> <input type="text" placeholder="手机号"> <button>发送验证码</button> <input type="text" placeholder="验证码"> </div> <style> .container{ width: 300px; background-color: #f1f1f1; } </style>
2. input想要撑满div
<div class="container">
<input type="text" placeholder="手机号">
<button>发送验证码</button>
<input type="text" placeholder="验证码">
</div>
<style>
.container{
width: 300px;
background-color: #f1f1f1;
}
.container input{
width: 100%;
}
</style>
结果全部被挤下来,因为button按钮本身占着位置
-
根据子绝父相原理设置button位置
<div class="container"> <input type="text" placeholder="手机号"> <button>发送验证码</button> <input type="text" placeholder="验证码"> </div> <style> .container{ position: relative; width: 300px; background-color: #f1f1f1; } .container input{ width: 100%; height: 30px; } .container button{ position: absolute; top: 7px; right: 0; background-color: #fff; border: none; // 去掉边框 outline: none; // 去掉点击按钮后的边框 } </style>
- 如果有更好的实现办法下方评论