表单添加Bootstrap图标后输入框对齐偏离中心的问题

问题原因 #

你遇到的输入框偏移，本质是因为图标和输入框都设置为inline-block元素，给图标加负margin-left后，虽然视觉上图标覆盖到输入框，但图标仍会占据布局空间。加上输入框设为50%宽度，整体布局就被挤得向右偏移。

修复方案 #

方案1：用相对定位容器包裹（推荐） #

把密码输入框和图标放到一个容器里，通过绝对定位让图标悬浮在输入框内，完全不占用布局空间：

1. 修改HTML结构：

<p>
  <label for="password">Password</label><br>
  <div class="input-group">
    <input type="password" id="password" name="password" minlength="8" maxlength="63" >
    <i class="bi bi-eye-slash" id="togglePassword"></i>
  </div>
</p>

2. 添加对应CSS：

.input-group {
  position: relative;
  display: inline-block;
  width: 50%; /* 和输入框原宽度保持一致 */
}
.input-group input {
  width: 100%;
  margin: 0; /* 移除输入框原有margin，避免容器内多余间距 */
}
.input-group i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  margin-left: 0; /* 去掉原来的负margin */
}

方案2：调整输入框内边距（无需修改HTML） #

给密码输入框增加右侧内边距，为图标预留位置，同时确保图标悬浮在输入框上层：

修改CSS：

input[type="password"] {
  padding-right: 60px; /* 给图标留出足够空间 */
}
form i {
  margin-left: -60px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle; /* 和输入框垂直对齐 */
  position: relative;
  z-index: 1; /* 确保图标在输入框上层，不被输入框遮挡 */
}

原理说明 #

两种方案核心都是让图标脱离常规布局流：

• 方案1用绝对定位，图标完全不占用布局空间，输入框宽度不受影响；
• 方案2通过调整输入框内边距，让图标覆盖在预留的空间上，不会挤压输入框的布局宽度。

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