如何替代Safari不兼容的flex gap实现输入框等间距布局且不改变高度

问题原因分析 #

你原来的相邻兄弟选择器.myDiv > * + *逻辑本身是正确的，出现间距不均主要有两个常见原因：

• 没有给input统一盒模型和宽度，浏览器默认的input样式差异导致元素宽度不一致，挤占了间距空间
• 如果你希望输入框占满整个容器宽度，没有设置flex伸缩规则，容器剩余空间会被加到最后一个元素后面，导致看起来最后一个间距更大
  你尝试的.inline-inputs > * *写法问题在于，后代选择器会匹配到所有子元素内部的节点，且没有排除第一个元素，会导致第一个输入框左侧也出现多余边距，同时margin作用的节点层级不对，就会触发高度偏移。

兼容方案 #

以下方案完全兼容所有Safari版本，不需要使用gap属性，且不会出现高度偏移问题。

场景1：输入框宽度固定，仅需相邻间距相等（不需要占满容器）

.myDiv {
  display: flex;
  align-items: center;
  margin: 10px 0;
  /* 可选：不需要容器被拉伸的话添加这行 */
  width: fit-content;
}

.myDiv input {
  /* 统一盒模型，避免默认样式导致宽度/高度差异 */
  box-sizing: border-box;
  margin: 0;
  padding: 4px 6px;
  line-height: 1.2;
  /* 显式设置输入框宽度，按需调整数值 */
  width: 120px;
}

/* 仅相邻的直接子元素添加左间距，第一个元素不加 */
.myDiv > * + * {
  margin-left: 20px;
}

场景2：输入框和间距共同占满容器，实现完全等间距

用外层负margin方案，和原生gap表现完全一致：

.myDiv {
  display: flex;
  align-items: center;
  margin: 10px 0;
  /* 外层负margin抵消第一个子元素的左间距 */
  margin-left: -20px;
  box-sizing: border-box;
  /* 容器宽度按需调整，100%即占满父级 */
  width: 100%;
}

.myDiv input {
  box-sizing: border-box;
  flex: 1;
  margin: 0;
  padding: 4px 6px;
  line-height: 1.2;
  /* 所有子元素统一加左间距 */
  margin-left: 20px;
}

如果你的input外部有包裹元素（比如做校验提示的容器），把input的样式规则写到包裹元素上即可，逻辑不变。

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