如何不修改HTML、不使用JS实现ul下li兄弟节点的递进缩进效果

云原生阿岚

2026-9-27

解决方案

可以通过覆盖足够多场景的li序号规则实现需求，不需要修改HTML结构，也不需要引入JavaScript，同时兼容多行文本场景，实际使用中面包屑层级不会超过100层，该方案完全够用。

完整CSS代码

如果使用CSS预处理器（如SASS/LESS），可以用循环自动生成规则：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul > li {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start; /* 多行文本时箭头和第一行文字对齐 */
}

ul > li ~ li:before {
  content: '⤷';
  display: inline-block;
  padding: 0 5px;
  flex-shrink: 0; /* 避免箭头被挤压 */
}

/* 从第三个li开始，每个层级增加20px缩进，循环到100层完全覆盖所有使用场景 */
@for $i from 3 through 100 {
  ul > li:nth-child(#{$i}) {
    padding-left: calc(20px * (#{$i} - 2));
  }
}

如果需要原生CSS实现，手动添加对应层级规则即可：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul > li {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
}

ul > li ~ li:before {
  content: '⤷';
  display: inline-block;
  padding: 0 5px;
  flex-shrink: 0;
}

ul > li:nth-child(3) { padding-left: 20px; }
ul > li:nth-child(4) { padding-left: 40px; }
ul > li:nth-child(5) { padding-left: 60px; }
ul > li:nth-child(6) { padding-left: 80px; }
/* 继续按这个规则添加到你需要的最大层级即可 */