我有一个注册表单，在表单输入中有图标。当我调整窗口的大小时，它会移动（挤压），这是非常恼人的，谁能告诉我我应该做什么来修复它的位置。

#username-logo {
  position: relative;
  float: left;
  top: 40px;
  left: 15%;
}

#password-logo {
  position: relative;
  float: left;
  top: 40px;
  left: 15%;
}

#email-logo {
  position: relative;
  float: left;
  top: 40px;
  left: 15%;
}

<代码><；表单ID=“表单容器”>；<；H1 ID=“ LinkList ”>；注册<；/H1>；<；INPUT type=“ text ” name=“ username ” ID=“ username ” placeholder=“ userName ” required=“ required ”>；<；I CLASS=“ Fas FA-USER ” ID=“用户名-徽标”>；<；/I>；<；INPUT type=“ password ” name=“ password ” ID=“ Password ” placeholder=“ Password ” Required=“ Required ”>；<；I CLASS=“ Fas fa-lock ” ID=“ password-logo ”>；<；/I>；<；输入type=“电子邮件” name=“电子邮件” ID=“电子邮箱” placeholder=“邮件” required=“必需的”>；<；I CLASS=“ Fas FA-ENVELOPE ” ID=“ EMAIL-LOGO ”>；<；/I>；<；INPUT TYPE=“ SUBMIT ” NAME=“ SUBMIT ” ID=“ SUB MIT ” VALUE=“ REGISTER ”>；<；/窗体>；

顺晟科技：

放置容器.register-form { display: flex; flex-wrap: wrap; max-width: 20rem; } .input-container { display: flex; } .input-container input {} .input-container i {}和徽标<h1 id="linklist">Register</h1> <form id="form-container" class="register-form"> <div class="input-container"> <input type="text" name="username" id="username" placeholder="Username" required="required"> <i class="fas fa-user" id="username-logo"></i> </div> <div class="input-container"> <input type="password" name="password" id="password" placeholder="Password" required="required"> <i class="fas fa-lock" id="password-logo"></i> </div> <div class="input-container"> <input type="email" name="email" id="email" placeholder="Email" required="required"> <i class="fas fa-envelope" id="email-logo"></i> </div> <button type="submit" class="button">Register</button> </form>，并使用position: relative重定位。这样，徽标将根据容器（此处为position: absolute）而不是根据主体进行定位，并且如果正确

包装图标和输入，从那里你可以更容易地设置它的样式。图标的位置完全取决于您的设计。

<form id="form-container">
  <h1 id="linklist">Register</h1>
  <input type="text" name="username" id="username" placeholder="Username" required="required">
  <i class="fas fa-user" id="username-logo"></i>
  <input type="password" name="password" id="password" placeholder="Password" required="required">
  <i class="fas fa-lock" id="password-logo"></i>
  <input type="email" name="email" id="email" placeholder="Email" required="required">
  <i class="fas fa-envelope" id="email-logo"></i>
  <input type="submit" name="submit" id="submit" value="Register">
</form>

<代码><；H1 ID=“ LinkList ”>；注册<；/H1>；<；form ID=“ form-container ” Class=“ register-form ”>；<；DIV类=“输入容器”>；<；INPUT type=“ text ” name=“ username ” ID=“ username ” placeholder=“ userName ” required=“ required ”>；<；I CLASS=“ Fas FA-USER ” ID=“用户名-徽标”>；<；/I>；<；/DIV>；<；DIV类=“输入容器”>；<；INPUT type=“ password ” name=“ password ” ID=“ Password ” placeholder=“ Password ” Required=“ Required ”>；<；I CLASS=“ Fas fa-lock ” ID=“ password-logo ”>；<；/I>；<；/DIV>；<；DIV类=“输入容器”>；<；输入type=“电子邮件” name=“电子邮件” ID=“电子邮箱” placeholder=“邮件” required=“必需的”>；<；I CLASS=“ Fas FA-ENVELOPE ” ID=“ EMAIL-LOGO ”>；<；/I>；<；/DIV>；<；button type=“ submit ” Class=“ button ”>；注册<；/button>；<；/窗体>；