如何阻止<li>元素折叠？解决浮动或行内样式引发的嵌套列表异常

我来给你捋捋这个问题：原本黄色的<li>是外层<ul>的子元素，在没给<li>或者外层<ul>设置float:left或display:inline这类属性时，显示一切正常，但一旦给它们加上浮动或者行内样式，内层嵌套的粉色<li>外观就会出现变化。

先把相关的HTML和CSS代码贴出来，方便理解场景：

HTML结构 #

<ul class="top_nav"> 
  <li>name 
    <ul class="sub_nav"> 
      <li>name1 icnkdn ndkcnks kkncksn </li> 
      <li>name2</li> 
      <li>name3</li> 
    </ul> 
  </li> 
  <li>home</li> 
</ul>

基础CSS样式 #

.top_nav{ 
  list-style-type:none; 
  padding:0; 
}
.top_nav > li { 
  padding:1em 2em; 
  background:yellow; 
  position:relative; 
}
.sub_nav{ 
  position:absolute; 
  z-index:1; 
  background:green; 
}
.sub_nav li{ 
  display:block; 
  background:pink; 
  padding:1em 3em; 
}

问题原因分析 #

当你给外层的.top_nav或者它的直接子<li>添加float:left或者display:inline（包括inline-block）时，会改变外层<li>的默认布局特性：

• 原本块级的<li>会从默认的占满父容器宽度变成由内容撑开宽度
• 如果是给外层<ul>加浮动，还可能导致<ul>高度塌陷，间接影响子元素的布局空间

这两种情况都会让绝对定位的.sub_nav以及它下面的粉色<li>失去原本的布局参考，比如粉色<li>的宽度会跟着外层<li>的收缩宽度走，导致内容换行、显示不全，或者位置偏移。

解决方案 #

针对这个问题，有两种常见的修复方式：

1. 固定内层导航宽度：给.sub_nav设置明确的宽度，或者让它继承父级的宽度并对齐左侧，确保粉色<li>有足够的显示空间：

.sub_nav {
  position:absolute;
  z-index:1;
  background:green;
  width: 100%; /* 继承父级<li>的宽度 */
  left: 0; /* 确保和父级左侧对齐 */
  padding: 0; /* 清除默认内边距避免错位 */
}

2. 清除浮动影响：如果是给外层<ul>加了浮动，给.top_nav添加overflow:hidden来修复高度塌陷问题，保证子元素的布局不受影响：

.top_nav{ 
  list-style-type:none; 
  padding:0; 
  overflow: hidden; /* 清除浮动带来的高度塌陷 */
}

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