时间戳

首页 > 解决方案 > 如果 `li` 元素是一个 flexbox，那么项目符号不会显示？

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

问题描述

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

<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; }

控制是否显示子弹。

标签： cssflexbox

解决方案

是的你是对的。使用 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;
}

推荐阅读