100％宽度的flex水平列表，其中justify-content：space是均匀的，如何将子弹放在空间的中心？

Question

我有一个水平导航栏，它是一个UL列表，每个菜单项都有一个LI，具有display:flex和justify-content:space-evenly

我无法确定UL宽度，它应该与容器的宽度一样，并且我也不知道项目的数量。

如何通过纯CSS而不在html中添加标签的方式将项目符号始终准确地放置在项目之间的可用空间中间？

Answer 1

您可以通过在li元素的伪元素之后使用子弹并将display: contents;视为ul容器的直接子代来构建某种效果，这意味着它们正好位于实数的中间项目。但是，只有在单个li元素（在下面的示例中为a元素）内只有一个“真正的”孩子的情况下，这才起作用。

ul {
display: flex;
padding: 0;
margin: 0;
justify-content:space-evenly;
align-items: center;
}

li {
display: contents;
list-style-type: none;
position: relative;
}

li:not(:last-child):after {
content: "";
width: 5px;
height: 5px;
border-radius: 5px;
background-color: currentcolor;
display: block;
}

<ul>
<li><a href="#">Point 1</a></li>
<li><a href="#">Point 2</a></li>
<li><a href="#">Point 3</a></li>
<li><a href="#">Point 4</a></li>
</ul>