的額外空間

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"; 
}