如果`li`元素是一个flexbox，那么项目符号将不会显示？

Question

如果我们有一个无序列表，默认是有项目符号的：

<ul>
  <li>hello</li>
  <li>world</li>
</ul>

然而，如果我们做到了display: flex，项目符号就不会再显示了：

li { display: flex }

<ul>
  <li>hello</li>
  <li>world</li>
</ul>

CSS 中是否有这样的规则，因为显示项目符号可能仍然很自然，但让

ul { list-style-type: none; }

控制是否显示项目符号。

Answer 1

是的你是对的。使用 display:flex 你告诉 ul 它不再是 display:list 了。如果您希望使用 Flex 使用伪元素显示项目符号：

ul li:before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    border-radius: 50%;
    left: 0;
    margin-top: -7px; /* half bullet height */
    width: 14px;
    height: 14px;
    background: #000;
}