如何减小嵌套列表行高？解决设置li样式后嵌套结构异常问题

你用height: 0px和width: 0px来压缩列表行间距的思路完全错了——这会直接把li元素的盒模型尺寸清零，嵌套在li里的子列表根本没地方容纳，自然会跑到列表外面去。

要让有序列表行间距更紧凑，正确的做法是调整li的外边距（margin）、**内边距（padding）**或者行高（line-height），比如：

/* 按需调整数值，压缩列表项之间的间距 */
ol > li {
  margin-bottom: 4px; /* 把默认外边距改小，设为0就是完全紧凑 */
  /* 也可以用 padding-bottom: 0; 减少内部间距 */
  /* line-height: 1.2; 调整行高也能让整体更紧凑 */
}

如果只想针对顶层列表、不影响嵌套子列表，就用ol > li选择器，这样只会选中直接在ol下的li，嵌套的li不会被改动，结构自然恢复正常。

另外你提供的HTML里多了一层<pre>标签，实际使用时要去掉，不然会干扰列表的正常渲染，正确的HTML结构应该是：

<ol> 
  <li> item one </li> 
  <li> item two 
       <ol>
         <li> nested item one</li> 
       </ol>
  </li> 
  <li> item three </li>
  <li> item four </li> 
  <li> item five  </li> 
</ol>

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