CSS实现有序列表分两列布局时两列不对齐问题求助

问题定位 #

两列顶部不齐是CSS多列布局（columns）的默认特性导致的，有2处错误配置：

1. 给ol.gradient-list设置了全局的margin-top: 1.75rem、padding-top: 8%，多列布局会将容器的上边距仅作用于第一列，导致第二列顶部没有对应边距，产生高度差
2. 写了无效属性display: flexbox，该属性是废弃的旧规范属性，浏览器不识别，不会生效

修复方案 #

替换对应CSS规则即可：

1. 修正ol多列布局规则，删除无效属性，清除默认边距

ol {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  /* 新增两列间距，可自行调整数值 */
  column-gap: 2rem;
  margin: 0;
  padding: 0;
}

2. 调整gradient-list的边距规则，仅给第一个列表项加上边距，避免多列拆分时边距错位

ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  /* 删除原有的margin:1.75rem 0和padding-top:8% */
  margin: 0;
  padding-left: 25%;
  font-weight: bold;
  font-size: 25px;
  width: fit-content;
  align-content: center;
}
/* 新增规则，仅给第一列第一个元素加上边距 */
ol.gradient-list>li:first-child {
  margin-top: 1.75rem;
}

剩下的原有CSS规则不用改动，修改后两列顶部就会自动对齐到同一水平高度。

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