如何在HTML边距显示元素时避免定位错位、文字堆叠等问题？

解决方案 #

你遇到的编号垂直堆叠问题核心原因是给元素设置了width: 0，行内块元素宽度为0时内容会自动换行。以下提供两种适配性强的实现方案，均不需要设置宽度为0，也不会残留空白：

方案1：父元素预留边距+负边距偏移（更稳定，推荐） #

先给承载定义的li元素左侧预留足够的编号放置空间，再通过负边距将编号拉到预留区域内，适配各种编号长度和字号变化：

/* 一级定义项样式 */
.defs > li {
  list-style: none;
  /* 左侧预留1.5em空间放一级编号 */
  padding-left: 1.5em;
}
/* 一级编号样式 */
.iteration {
  display: inline-block;
  /* 负边距等于父元素左侧预留padding，将编号拉到边距区域 */
  margin-left: -1.5em;
  /* 可选：设置最小宽度保证多位数编号对齐 */
  min-width: 1.5em;
}
/* 二级子定义项样式 */
.subSenses .subSense {
  list-style: none;
  /* 左侧预留3em空间放二级编号 */
  padding-left: 3em;
}
/* 二级编号样式 */
.subsenseIteration {
  display: inline-block;
  margin-left: -3em;
  min-width: 2.5em;
}

如果担心字号变化导致位置偏移，可以将em单位替换为ch（基于当前字体数字宽度的单位），对齐精度更高。

方案2：现有代码最小改动 #

如果不想调整父元素样式，只需要在你现有CSS基础上增加white-space: nowrap强制编号内容不换行，即可解决堆叠问题：

.iteration {
  display: inline-block;
  position: relative;
  right: 1em;
  width: 0px;
  white-space: nowrap;
}

.subsenseIteration {
  display: inline-block;
  position: relative;
  right: 2em;
  width: 0px;
  white-space: nowrap;
}

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