Html flexbox容器中列出项目前的额外空间

我有以下代码：

HTML

<ul class="menu">
  <li><a href="#">Item 1</a></li>
  <li>
    <a href="#">Item 2</a>
  </li>
  <li>
    <a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>

第1项和第4项工作正常，但在第2项和第3项之前有一个额外的空间（就在项目符号之后）。我知道这是因为这些项目在HTML中有一个新行。但是，没有

ul.menu li:：before

规则，一切都可以正常工作

我肯定我错过了一些明显的东西。有人知道如何去掉多余的空间，并在HTML中保留新行吗？也许是一些简洁的解决方案，而不仅仅是

ul.menu li a:：before

（这一个不好，它也让子弹可以点击）

---

注意：即使没有

display:flex，也会出现同样的问题因此它显然与flexbox无关。
您必须在同一行中为item2和item3编写
，这样会删除空间

试试这个代码。它起作用了


HTML
您看到的空间是所有内联元素的特征-只需将
display:flex
添加到
li
中即可

请参阅下面的演示和我的：


正文{
字体系列：无衬线；
}
菜单{
显示器：flex；
列表样式：无；
}
菜单李：：之前{
内容：“\2022”；
}
菜单李{
显示器：flex；
}









这基本上是同一个问题：请仔细阅读我的问题：
如何去掉多余的空间并在HTML中保留新行？
简洁明了。谢谢，这就是我需要的！聪明是简单的。
ul.menu
{
  display: flex;
  list-style: none;
}
ul.menu li::before
{
  content: "\2022";
}

<ul class="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

body
{
    font-family: sans-serif;
}
ul.menu
{
    display: flex;
    list-style: none;
}
ul.menu li::before
{
    content: "\2022";
}