如果 `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;
}