LI 元素之间的 html 导航列表中 <!-- --> 的用途是什么？

Question

我看到一个有趣的导航列表示例如下（省略了css），

<nav class="navigation">
    <ul>
        <li><a href="#">Profile</a></li><!--
        --><li><a href="#">Settings</a></li><!--
        --><li><a href="#">Notifications</a></li><!--
        --><li><a href="#">Logout</a></li>
    </ul>
</nav>

乍一看，我以为<!--and -->Between<li>标签可能是错误留下的。作者刚刚忘记清除评论了。

但当我把它们排除在外时，导航栏看起来就不一样了。看来是故意添加的。

由于我不是 HTML 专家，所以有人可以解释一下吗？这是常见的伎俩吗？

Answer 1

这是删除表现为内联元素之间的空格的换行符的技巧。

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
ol > li {
  display: inline-block;
  background: blue;
  color: white;
  padding: 0.5em;
}

Without &lt!-- -->
<ol>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
</ol>
<br>
With &lt!-- --&gt;
<ol>
  <li>ONE</li><!--
  --><li>TWO</li><!--
  --><li>THREE</li>
</ol>

它使换行符成为注释，因此最终结束标记和下一个开始标记 ( </li><li>) 之间没有任何内容。

或者，您可以将开始标记紧跟在上一行的结束标记之后。

<ol>
  <li>ONE</li><li>
  TWO</li><li>
  THREE</li>
</ol>

或使用float: left;，但这也需要clear: both;在它之后。

但这些都是老把戏了。现在你只需使用display: flex;.

<ol>
  <li>ONE</li><li>
  TWO</li><li>
  THREE</li>
</ol>

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
ol > li {
  background: blue;
  color: white;
  padding: 0.5em;
}