如何在Jekyll主题中保持嵌套列表左padding为0且不破坏层级

问题背景 #

更换Jekyll主题后，主题CSS将所有<ul>的padding-left设为0，导致嵌套列表失去层级，所有列表项都左对齐，无法区分父子层级。需要在保持最外层列表左侧padding为0的同时，恢复嵌套列表的层级结构，且保证全站样式统一。

示例代码与效果 #

• Markdown源码：

+ item
  + nested item
+ item 2
  + nested item 2

• 生成的HTML：

<ul>
  <li>item
    <ul>
      <li>nested item</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>nested item 2</li>
    </ul>
  </li>
</ul>

• 实际错误显示：

• item
• nested item
• item 2
• nested item 2

• 预期正确显示：

• item
  • nested item
• item 2
  • nested item 2

解决方案 #

通过自定义CSS区分最外层列表和嵌套列表的样式，既保留外层padding-left:0，又给内层列表添加缩进：

方案1：全局样式统一调整

适用于全站所有列表的统一设置：

/* 基础列表样式：最外层ul无左侧padding */
ul {
  padding-left: 0;
  list-style-type: disc; /* 可根据主题风格调整项目符号类型 */
  list-style-position: inside; /* 可选，让项目符号与内容左对齐 */
}

/* 嵌套ul添加左侧缩进，恢复层级区分 */
ul ul {
  padding-left: 1.5em; /* 缩进大小可根据需求调整 */
  list-style-position: outside; /* 可选，优化嵌套项目符号的位置 */
}

方案2：针对内容区域精准调整

如果主题有特定的内容容器（比如.post-content），可以更精准地控制样式范围：

/* 仅文章内容里的最外层ul设为padding-left:0 */
.post-content > ul {
  padding-left: 0;
}

/* 内容区域内的所有嵌套ul添加缩进 */
.post-content ul ul {
  padding-left: 1.5em;
}

注意事项 #

1. 确保自定义CSS文件在主题默认CSS之后加载（Jekyll中可将自定义CSS放在assets/css目录，并在_includes/head.html中晚于主题CSS引入），保证样式优先级更高。
2. 可根据主题设计风格调整1.5em的缩进值，或更换list-style-type（比如circle、square）匹配主题样式。

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