余分なスペース

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の前に（弾丸の直後に）余分なスペースが1つあります。私はこれらの項目のHTMLに新しい行があるので、それが分かります。ただし、ul.menu li::beforeルールがないとすべて正常に動作します。

私は何かが明らかでないと確信しています。余分なスペースを取り除き、HTMLで新しい行を保持する方法を知っている人はいますか？おそらく、ちょうどul.menu li a::before（これは良いものではない、弾丸もクリック可能にする）よりむしろいくつかのきちんとした解決策。

JSfiddle

P.S：同じ問題ので、それは明らかにフレキシボックス関連ではありませんでもdisplay: flex;せずに表示されます。

Answer 1

スペースがすべてインライン要素の特徴である - あまりにもliにdisplay: flexを追加します。

参照のデモ以下、私の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

item2とitem3に対して<li>と書かなければなりません。同じ行にスペースを入れてください。

このコードを試してください。できます。あなたが見る

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