CSS 使用 flexbox 渲染的有序列表不显示项目符号/小数（项目也使用 flexbox 渲染）

在本文中，我们将介绍使用 flexbox 渲染的有序列表不显示项目符号/小数的问题，并提供相应的解决方法。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 的 flexbox 属性渲染有序列表时，有时候会遇到一个问题：项目符号/小数不显示。通常，在使用有序列表时，我们会期望每个列表项前都有一个项目符号或小数，以便更好地展示每个项目的顺序关系。然而，当我们将有序列表的父容器应用 flexbox 属性时，这些项目符号/小数可能不会显示。

问题示例

我们通过以下示例来说明这个问题：

<style>
  .list-container {
    display: flex;
  }
</style>

<div class="list-container">
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>
</div>

在上面的示例中，我们创建了一个包含有序列表的父容器，并将其应用了 display: flex; 属性。然而，当我们查看页面时，我们会发现列表项前面没有显示项目符号或小数。

解决方法

为了解决这个问题，我们可以使用伪元素 ::before 来手动添加项目符号/小数。我们只需要为有序列表的每个列表项的 ::before 伪元素设置样式，并将其中的文本内容设置为项目符号或小数即可。

下面是一个解决上述问题的示例代码：

<style>
  .list-container {
    display: flex;
  }

  ol li::before {
    content: counter(li);
    counter-increment: li;
    margin-right: 5px;
  }
</style>

<div class="list-container">
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>
</div>

在上面的示例代码中，我们为 ol li::before 选择器设置了样式。其中，content: counter(li) 用于为伪元素设置内容，counter-increment: li 用于增加计数器的值，以便显示正确的项目序号。我们还添加了一个 margin-right 属性来为项目符号/小数添加一定的间距。