如何解决使用 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 举报,一经查实,本站将立刻删除。