如何修复OTP文本输入框偏左问题实现均匀居中对齐

问题现象 #

开发OTP验证码输入模块时出现对齐异常：为每个承载输入框的div元素设置95%宽度后，组件右侧存在多余留白，OTP文本框整体偏左、无法居中对齐，选中对应div标签可清晰观察到右侧的空白区域。
参考效果截图：

问题相关原始代码 #

<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="1">
 </div>
<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="2">
 </div>
<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="3">
 </div>
<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="4">
 </div>
<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="5">
 </div>
<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="6">
 </div>
<div class="ControlWrapper" style="align-items: center; displa: inline-flex;">
 <div class"InputItemOTP"> 
  <input class="input" pattern="[0-9]+" type="number" id="7">
 </div>

问题根因 #

代码存在三类问题共同导致对齐异常：

• 语法错误：所有class属性赋值漏写等号（如class"InputItemOTP"应为class="InputItemOTP"）；内联样式中displa为拼写错误，正确CSS属性名为display，这部分错误会直接导致样式规则失效
• 宽度设置逻辑错误：核心诱因是给每个单独的输入项包裹div设置95%宽度，块级元素的百分比宽度相对于父容器计算，每个输入项自身就会预留5%的右侧空间，多个元素横向排列时总宽度远超出容器范围，浏览器默认靠左排版就会出现整体偏左、右侧留白的效果
• 结构缺失：所有输入项包裹层为并列关系，没有统一的外层容器做整组居中约束，inline-flex仅作用在单个输入项上，无法实现整组控件的居中排布

修复步骤 #

1. 先修正所有语法错误，补全class属性的等号，修正display属性拼写
2. 调整DOM结构：新增统一的外层容器包裹所有OTP输入项，在外层容器上设置flex布局和居中规则
3. 取消单个输入项包裹层的95%宽度设置，给输入框设置统一的固定尺寸，适配移动端点击和展示需求
4. 修复后的可运行参考代码：

<!-- 整组OTP输入框的外层容器，负责居中排布和间距控制 -->
<div style="display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 0 12px;">
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="1" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="2" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="3" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="4" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="5" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="6" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
  <div class="ControlWrapper" style="display: inline-flex; align-items: center;">
    <div class="InputItemOTP"> 
      <input class="input" pattern="[0-9]+" type="number" id="7" style="width: 42px; height: 42px; text-align: center; font-size: 18px;">
    </div>
  </div>
</div>

前端布局知识点补充 #

• 百分比宽度的计算基准是父元素的内容区宽度，不要给需要横向排列的多个同级元素设置高比例的百分比宽度，否则会导致元素换行、宽度溢出、多余留白等问题
• 实现一组横向元素的居中排布，优先用flex布局：父元素设置display: flex+justify-content: center即可快速实现主轴居中，gap属性可以统一控制子元素间距，无需给每个子元素单独设置外边距
• 布局问题排查优先打开浏览器开发者工具：在元素面板中可以直接看到无效的CSS属性（会被横线划掉）、元素的实际占位尺寸、边距和边框数值，能快速定位语法错误和尺寸设置问题

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