input框中内嵌button按钮

input框中内嵌button按钮

用途

常见的使用场景就是input框中输入手机号然后发送验证码

实现

1. 大致框架

   <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按钮本身占着位置

3. 根据子绝父相原理设置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>
   

4. 如果有更好的实现办法下方评论