为什么我的 Flexbox 属性会干扰我的 hr 标签？

Question

因此，我正在用我的代码制作一个侧边栏，并希望在某些元素之间有一个分隔符，以实现我使用 hr 标签，但当我在上下文代码中使用它时，它的行为会出乎意料。

当我第一次添加 hr 元素时，它根本没有显示出来，我添加它们的地方之间只有很多额外的空间，因此图像 - 因此，我继续在 codepen 上隔离问题，以找出到底是哪个元素篡改了这个非常简单的标签。我慢慢地拿走了我的 CSS 样式属性，并等待一个巨大的变化，看看哪一个使 hr 标签表现得很奇怪。

我发现这是我的侧边栏div类中的flexbox属性，我发现这是我的display：flex属性这是我的布局

sidebar{
  display:flex;
  flex-direction:column;
  justify-content: space-between;

我所有的属性都以某种方式篡改了它，什么时候带你经历发生的事情 正常侧边栏一切正常，但我想调整布局，hr 标签已经存在并且正常运行

我添加了显示柔性，因为默认值不是垂直交叉轴，它使我的侧边栏水平，hr标签仍然在那里

当我添加 flex-direction 列时，布局恢复为垂直，但我所有的 hr 标签都消失了，现在应该有一个空白区域

当我在它之间添加合理的内容空间时，它给了我想要的布局，但是在我添加了小时分隔符的位置和它刚刚显示的位置之间有空格

这是我的代码的最小可重现示例

.sidebar{
 box-sizing: border-box;
 height:709px;
 width:634px;
 margin:0.5px;
 padding:10px;
 display:flex;
 flex-direction: column;
 justify-content: space-between;
}

   <header class="title"> x's habit cloud</header>
  
        <ul>
          <div class="sidebar">
          

   <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i>search</a></li>
   <li><a href="#"><i class="fa-solid fa-gears"></i>settings</a></li>
   <li><a href="#"><i class="fa-solid fa-inbox"></i>updates</a></li>
   <hr>
   <li><a href="#"><i class="fa-solid fa-note-sticky"></i>+add a page</a></li>
   <li><a href="#"><i class="fa-solid fa-house"></i>my home</a></li>
   <li><a href="#"><i class="fa-solid fa-bookmark"></i>notes</a></li>
   <li><a href="#"><i class="fa-solid fa-pen "></i>journal</a></li>
   <hr>

从示例中您可以看到，如果删除样式，hr 标签就会回来

如果您无法与代码交互以在没有样式的情况下查看它，请随意使用我的 CXodepen 链接 https://codepen.io/Adama-J/pen/GRzdapy 继续以任何方式与我的代码交互似乎适合从不同角度来确定问题

如果有人有任何建议或建议来解决此问题，我们将不胜感激！

我希望我的 hr 是什么样子以及我希望它在哪里

Answer 1

我建议，如果您想要分组，请使用适当的元素，例如子菜单。 - https://codepen.io/Paulie-D/pen/RwvJXOG

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body>ul {
  display: flex;
  flex-direction: column;
  margin: 1em;
  width: 50vw;
}

ul {
  list-style: none;
  padding-left: .5em;
}

a {
  text-decoration: none;
}

ul ul li:last-child {
  border-bottom: 1px solid green;
  padding-bottom: .5em;
}

ul ul li:first-child {
  padding-top: .5em;
}

<ul class="sidebar">
  <li>
    <ul>
      <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i>search</a></li>
      <li><a href="#"><i class="fa-solid fa-gears"></i>settings</a></li>
      <li><a href="#"><i class="fa-solid fa-inbox"></i>updates</a></li>
    </ul>
  </li>
  <li>
    <ul>
      <li><a href="#"><i class="fa-solid fa-note-sticky"></i>+add a page</a></li>
      <li><a href="#"><i class="fa-solid fa-house"></i>my home</a></li>
      <li><a href="#"><i class="fa-solid fa-bookmark"></i>notes</a></li>
      <li><a href="#"><i class="fa-solid fa-pen "></i>journal</a></li>
    </ul>
  </li>
</ul>