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

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>

标签： htmlcss

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>