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>