验证码input和 img 在一行显示

最新推荐文章于 2023-10-27 17:57:34 发布

pawN-Marin

最新推荐文章于 2023-10-27 17:57:34 发布

阅读量2.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/shichangcheng1314/article/details/104449073

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：前端实现以下的样式
1.第二行的input 框需要和图片放在一起，右边还有一个SMS验证按钮，需要有后端端口给前端获得四个值的验证码，前端验证填写数字和手机号码格式是否正确两个点以后才可以去点 SMS按钮进行后台请求
先实现前端部分（前端菜鸟）
前端验证码在这里插入图片描述
实现代码:

      <div class="form-row">
             <div class="form-group col-md-8 col-sm-8">
                 <div style="border: 1px solid #c0ccda;display: flex;justify-content:space-between;border-radius: 4px;">
                    <input class="form-control" style="flex:1;border:0px;outline:transparent;" id="captcha" type="text" placeholder="captcha ...">
                    <img style="flex:0 0 100px; width: 100px;" src="{% static 'img/test.png' %}" />
                </div>

               </div>
            <div class="form-group col-md-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <button type="button" style="float:right" class="btn btn-outline-primary btn-block">SMS</button>
            </div>
             </div>