多个 ul / ol （无序列表/有序列表）的嵌套时的重叠问题

最新推荐文章于 2024-08-21 16:48:11 发布

Miranda0922

最新推荐文章于 2024-08-21 16:48:11 发布

阅读量8.3k

点赞数 2

分类专栏： html 文章标签： css 前端列表 ul ol

本文链接：https://blog.csdn.net/Miranda0922/article/details/75021378

版权

在前端开发中，遇到ul/ol列表嵌套时出现重叠的问题，通过分析发现是li元素设置了固定高度并配合overflow: visible导致。取消高度限制并调整line-height，成功解决了这个问题。同时介绍了line-height的三种设置方式：百分比、像素值和数值。

摘要由CSDN通过智能技术生成

本来觉得写前端页面也不是一天两天，这样的问题应该是小菜一碟，可真正在做项目调格式的时候却突然懵逼了，想了半天才想明白是什么问题（也有可能因为之前已有的 css 总文件并不是我写的，没找到问题的症结）。如果你是一个前端小白，希望你不要踩这样的坑；如果你是一个入门级选手，希望你在做企业级项目的时候会想到这一点~

下面说正题

首先我搭了一个这样的页面框架

<div class="wrapper">
        <ul>
            <li>
                <span>我是第一个ul下的span</span>
                <ul>
                    <li>我是第一个li下嵌套ul的第一个li</li>
                    <li>我是第一个li下嵌套ul的第二个li</li>
                    <li>我是第一个li下嵌套ul的第三个li</li>