Дополнительное место до элементов списка в 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>

Answer 2

Вы должны написать <li> для item2 и item3 в той же строке, что и место.

Попробуйте этот код. Оно работает.

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