的额外空间

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>

Answer 2

您必须编写<li>项目2和项目3在同一行它将删除空间。

试试看看这个代码。有用。

JSFiddle

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

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