如何调整登录表单输入框起始位置，避免与图标重叠？

核心思路 #

别用相对定位偏移图标造成重叠，而是把图标定位在输入框内部左侧，同时给输入框添加左内边距，让输入内容从图标右侧开始显示。

修改后的代码 #

CSS 部分

/* 输入框容器，作为图标的定位参考 */
.input-group {
  position: relative;
  margin-bottom: 15px;
}

/* 输入框添加左内边距，避开图标区域 */
.input-group input {
  width: 100%;
  padding: 8px 10px 8px 35px;
  box-sizing: border-box;
}

/* 图标固定在输入框左侧并垂直居中 */
.input-group .fa-solid {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(177, 177, 177);
}

HTML 部分

<div id="centered">
  <div id="form">
    <h2>Connexion</h2>
    <form>
      <p>Nom d'utilisateur</p>
      <div class="input-group">
        <i class="fa-solid fa-user"></i>
        <input type="text" name="username" id="username" placeholder="Username" required />
      </div>
      <p>Mot de passe</p>
      <div class="input-group">
        <i class="fa-solid fa-lock"></i>
        <input type="password" name="password" id="pw" placeholder="Mot de passe" required />
      </div>
      <p><input type="submit" name="login" value="S'enregistrer" required /></p>
    </form>
  </div>
</div>

关键说明 #

• .input-group 设置相对定位，为图标提供定位基准
• 输入框的 padding-left 预留出图标空间，确保输入文本不会被遮挡
• 图标通过绝对定位+垂直居中，固定在输入框左侧，不干扰输入框布局

内容的提问来源于stack exchange，提问作者Samuel Galipeau