不知道如何调节图像位置

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

<div id="zc">
                    <span id="font1">
                        1号店用户登录<a href="#">注册账号</a>
                    </span>
                    <input type="text" placeholder="邮箱/用户名/手机" class="myinput"/>
                    <img src="img/userHead.png"/>
                </div>


```css
    .myinput{
                width:210px;
                height:35px;
                float:right;
                border:1px #808080 solid;
                margin-top:10px;
                margin-right:20px;
            }
            .label{
                border:1px #808080 solid;
                float:right;
                height:30px;
                margin-top:10px;
            }

###### 我想要达到的结果

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/052246281836126.png "#left")

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

哇，女前端哎！ 2021-11-29 19:45

关注


<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title></title>
     </head>
     <style>
         .box{
            width: 300px;
            color: #c2c2c2;
            font-size: 12px;
            margin: 0 auto;
        }
        .flex{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .title{
            color: #666;
        }
        .input{
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            border: 1px solid #c2c2c2;
        }
        .input img{
            width: 20px;
            height: 20px;
            margin: 0 20px;
            display: inline-block;
        }
        .input input{
            flex: 1;
            line-height: 30px;
            border: none;
        }
        .left{
            display: flex;
            align-items: center;
        }
     </style>
     <body>
         <div class="box">
            <div class="flex">
                <p class="title">1号店用户登录</p>
                <a href="">注册账号</a>
            </div>
             <div class="input left">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F67%2F65%2F5a17b5cce16de_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640778095&t=ce2cc999b99084f6c6d6e848e405b266" >
                 <input type="" name="" id="" value="" placeholder="邮箱/手机号/用户名" />
             </div>
            <div class="input left">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F67%2F65%2F5a17b5cce16de_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640778095&t=ce2cc999b99084f6c6d6e848e405b266" >
                <input type="" name="" id="" value="" placeholder="密码" />
            </div>
             <div class="flex">
                 <div class="left">
                     <input type="checkbox" name="" id="" value="" />
                     <span>自动登录</span>
                 </div>
                 <div class=""> 忘记密码？ </div>
             </div>
         </div>
     </body>
 </html>