madcap flare 的默认样式（如 `li { margin: 8px 0; }`）会干扰
css
多列布局（`column-count`）的正常流式分列，导致序号错位、列高不均；移除或重置 `
` 的垂直外边距即可恢复正确的三列（或多列）顺序
排列
。
在使用 CSS column-count 实现多列列表（如
- 或
- 元素上存在的垂直外边距（margin-top / margin-bottom）破坏了多列内容流的连续性 。MadCap Flare 默认注入的全局样式 li { margin: 8px 0; } 正是典型诱因——该 margin 会在每个列表项上下强制插入空白，导致浏览器在分列时将“带额外间距”的
- 视为不可分割的块，从而错误地跨列折行或拉伸列高。 ✅ 正确解决方案是 显式重置
- 的垂直外边距
，确保其在多列环境中以最小内联流行为参与分列：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
? 补充建议： 若需保留视觉间距，改用 padding 或 gap（对
.threecolumns { column-count: 3; column-gap: 1.5em; } .threecolumns li { margin: 0; /* 关键：清除 Flare 默认的 margin: 8px 0 */ break-inside: avoid; /* 可选：防止单个 li 被跨列截断 */ }- 设置 gap: 0.75em 在支持的现代浏览器中更安全）；
避免对
- 设置 display: block 以外的显示类型（如 inline-block），否则会进一步干扰列平衡； 在 Flare 中，可通过「Target Editor → Skin/Styles → Edit CSS」将上述修复样式添加至输出主题 CSS，确保覆盖默认规则。 最终效果：列表项严格按内容流均匀分布于三列，序号连续、对齐工整，完全符合 CSS Multi-column Layout 规范预期。
- ）时，
浏览器
本应将列表项按内容流自然切分为等宽列，并保持序号连续（如 1→2→3→4→5 按列优先顺序填充）。但实际渲染中若出现类似以下异常布局：
1. Item 1 2. Item 2 4. Item 4
3. Item 3 5. Item 51. Item 1 3. Item 3 5. Item 5
2. Item 2 4. Item 4