介绍：itemize text indent

itemize 是 Markdown 中常用的列表标记，它可以让文本内容自动形成列表，简化排版操作。但是，当列表内容较长时，其每行内容都以相同的距离缩进，有时并不能清晰地表现出列表内每个元素的嵌套层级。

itemize text indent 可以帮助解决这个问题，它是一种利用 CSS 样式表对 itemize 列表进行缩进设置的技巧，能够使列表内元素之间的缩进距离明显不同，更符合实际需求。

使用方法

1. 创建一个 itemize 列表并填充内容，如下所示：

- 第一层元素1
  - 第二层元素1
  - 第二层元素2
- 第一层元素2
  - 第二层元素3

2. 在 Markdown 中使用 HTML 标签，为列表元素加上 class，并通过样式表对这些 class 进行格式设置，如下所示：

<style>
.itemize li {
  text-indent: 20px;
}

.itemize li li {
  text-indent: 40px;
}
</style>

<ul class="itemize">
  <li>第一层元素1
    <ul>
      <li>第二层元素1</li>
      <li>第二层元素2</li>
    </ul>
  </li>
  <li>第一层元素2
    <ul>
      <li>第二层元素3</li>
    </ul>
  </li>
</ul>

3. 根据实际需求进行样式调整，如需要更多层级缩进，只需在样式表中增加层级 class 并设置相应的 text-indent 值即可。

注意事项

• 在 Markdown 中使用 HTML 标签时，需注意与文本内容的格式保持一致。例如，上述代码中的 li 标签均应与前面的横杠 - 相对应。

• 样式表中设置的 text-indent 值应该递增，以展现出缩进效果。

示例

• 第一层元素1
  • 第二层元素1
  • 第二层元素2
• 第一层元素2
  • 第二层元素3

<style>
.itemize li {
  text-indent: 20px;
}

.itemize li li {
  text-indent: 40px;
}
</style>

<ul class="itemize">
  <li>第一层元素1
    <ul>
      <li>第二层元素1</li>
      <li>第二层元素2</li>
    </ul>
  </li>
  <li>第一层元素2
    <ul>
      <li>第二层元素3</li>
    </ul>
  </li>
</ul>