html - 100% 宽度 flex 水平列表与 justify-content:space-evenly，如何将项目符号放在空格中心？

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>