使用 CSS 将嵌套的无序列表分解为列时，如何避免累积布局偏移？

问题描述

我有嵌套的列表，我通过 CSS 将这些列表分成两列以便于阅读。每当主列表中嵌套了另一个列表时，我都会在 Chrome 中收到 CLS（累积布局偏移）警告。

我想知道是否有办法通过预加载 CSS 来避免它？或者，也许有更好的方法可以自动将列表分成两列，而不会引入布局偏移。

注意：当我在主 ul 中没有嵌套 ul 时，没有布局偏移。

这是一些示例代码。

HTML：

<ul class="my_list">
    <li><a href="#First chapter"> First chapter</a></li>
    <li><a href="#Second chapter"> Second chapter</a></li>
    <li><a href="#Third chapter"> Third chapter</a>
        <ul>
            <li><a href="#First subchapter"> First subchapter</a></li>
            <li><a href="#Second subchapter"> Second subchapter</a></li>
            <li><a href="#Third subchapter"> Third subchapter</a></li>
        </ul>
    </li>
    <li><a href="#Fourth chapter"> Fourth chapter</a></li>
    <li><a href="#Fifth chapter"> Fifth chapter</a></li>
</ul>

CSS：

.my_list {
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:15px;
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:2;
}

提前致谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html html-lists