HTML

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：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Flexbox容器中列表项之前的额外空间

2 个答案:

HTML

CSS