html - Flexbox 容器中列表项之前的额外空间

Question

我有以下代码:

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>

CSS

ul.menu
{
  display: flex;
  list-style: none;
}
ul.menu li::before
{
  content: "\2022";
}

第 1 项和第 4 项工作正常，但第 2 项和第 3 项之前(就在元素符号之后)有一个额外的空格。我知道这是因为 HTML 中为这些元素新增了一行。但是，如果没有 ul.menu li::before 规则，一切都可以正常工作。

我确信我遗漏了一些明显的东西。有谁知道如何去掉多余的空间并仍然保留 HTML 中的新行吗？也许有一些巧妙的解决方案，而不仅仅是 ul.menu li a::before (这个不好，它也使元素符号可点击)。

JSfiddle

P.S.:即使没有 display: flex; 也会出现同样的问题，所以它显然与 flexbox 无关。

Answer 1

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

请参阅下面的演示和我的 updated Fiddle :

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

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