如何在窗口大小调整时使元素固定

Question

我有一个注册表单，在表单输入中有图标。当我调整窗口的大小时，它会位移(挤压)，这很烦人，谁能告诉我我应该怎么做才能使它在它所在的地方修复。

#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%;
}

<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>

Answer 1

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

.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>

Answer 2

将您的容器position: relative和徽标position: absolute并使用left/right/top/bottom重新定位。
这样徽标将根据容器(这里是input)而不是根据主体进行定位，并且如果使用正确，则不会在调整大小时移位