iPhone 5/5s上Ion-Input文本框布局异常，无法同行显示

嘿，这个小屏适配的坑我之前踩过！iPhone 5/5s的屏幕宽度只有320px，你的两个输入框加上中间的分隔符，再加上Ionic自带的默认样式，很容易就超出容器宽度导致换行。下面是具体的修复方法：

问题根源 #

你的.code类设了固定宽度100px，但ion-item本身自带默认的左右内边距，再加上中间的-符号，总宽度在320px的屏幕上就超了，浏览器只能被迫换行。

修复步骤 #

第一步：调整CSS样式 #

替换你原来的.code样式，用flex布局来控制整个输入组，同时重置Ionic的默认样式：

/* 给输入框的父容器加flex布局，强制元素在一行 */
.add-content > div {
  display: flex;
  align-items: center;
  gap: 6px; /* 控制输入框和分隔符之间的间距，可按需调整 */
}

/* 调整输入框容器的宽度，适配窄屏 */
.code {
  flex: 1; /* 让两个输入框平分可用宽度 */
  max-width: 150px; /* 限制最大宽度，避免大屏幕上太宽 */
}

/* 重置ion-item的默认内边距，减少不必要的宽度占用 */
.code ion-item {
  --padding-start: 0;
  --padding-end: 0;
  min-height: auto; /* 可选：缩小输入框的高度，更紧凑 */
}

/* 确保分隔符不会被压缩 */
.dash {
  flex-shrink: 0;
}

第二步：（可选）优化HTML结构 #

给输入组加个类名，让样式更清晰：

<div class="add-content">
  <div class="input-group">
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>
    <span class="dash">-</span>
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>
    <input hidden #loseFocus>
  </div>
</div>
<div class="card">
</div>

为啥这么改就好使？ #

• flex布局会强制容器内的元素在一行排列，除非你主动设置换行；
• flex:1让两个输入框自动平分容器的可用宽度，完美适配320px的窄屏；
• 去掉ion-item的默认内边距，避免额外宽度占用；
• flex-shrink:0保证中间的分隔符不会被挤变形；
• gap属性统一控制间距，比手动加margin更省心。

你可以根据自己的设计需求调整gap的数值和max-width的大小，测试一下，iPhone 5/5s上肯定能保持在同一行啦～

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