多列有序列表列对齐异常求助（基于MadCap Flare发布）

我需要实现三列布局的有序列表，代码如下：

<ol class="threecolumns">  
  <li>Item 1</li>  
  <li>Item 2</li>  
  <li>Item 3</li>  
  <li>Item 4</li>  
  <li>Item 5</li>
</ol>
<style>
.threecolumns {column-count: 3;}
</style>

在Codepen中能得到预期的列对齐效果：

1. Item 1 3. Item 3 5. Item 5
2. Item 2 4. Item 4

但通过MadCap Flare发布到网站后，输出的列表顺序混乱，不符合预期：

1. Item 1 2. Item 2 4. Item 4
   3. Item 3 5. Item 5

我排查后未发现与ol/ul相关的CSS规则导致此问题，求可行的解决建议？

解决建议 #

• 强制列表按纵向顺序填充：给.threecolumns添加column-fill: auto属性，同时设置合适的固定高度，让列表项自然按纵向分栏：

.threecolumns {
  column-count: 3;
  column-fill: auto;
  height: 60px; /* 根据单个列表项的高度调整数值 */
}

• 改用Flexbox实现多列布局：如果MadCap Flare对CSS多列属性支持有兼容性问题，用Flexbox的纵向换行来实现：

.threecolumns {
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 60px; /* 高度决定列数，按需调整 */
}

• 检查MadCap Flare默认样式干扰：在项目的样式表中查找ol、li相关规则，确认是否存在display、float或break-inside这类属性影响布局。必要时可以针对性覆盖：

.threecolumns li {
  break-inside: avoid; /* 防止单个列表项被拆分到不同列 */
  display: list-item;
}

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