html - 如何使用 CSS 和 HTML 在列表元素之间正确设置分隔符？

Question

我有一个像这样的简单列表，我想使用 |作为每个列表项之间的分隔符。我怎样才能正确地做到这一点？

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

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

电流输出:
元素 1 元素 2 元素 3
预期输出:
第 1 项 |第 2 项 |第 3 项
我能想到的最简单的方法是将分隔符作为 HTML 元素包含在内，用 <li> 包装它对我来说确实很好，因为它们的内容在语义上与列表无关。此外，禁止在 <li> 中使用 <ul>/<ol> 以外的标签。
解决这个问题的最佳方法是什么？

Answer 1

尝试使用 border这是实现的最简单方法。

ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
li:not(:last-child) {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>