Html 使用flexbox均匀地垂直间隔列表和子列表项

好了，伙计们，我现在正在学习CSS，我有点困惑为什么我不能让它做我想做的事情。我可能忽略了一些非常简单的事情

我希望有一个无序列表，包含在一个全高flexbox边栏容器中垂直间隔均匀的子列表，子列表项在每个列表项之间做相同的操作

到目前为止，我所尝试的一切都没有对列表项的显示方式产生任何影响

感谢您的帮助

正文{
保证金：0；
背景色：rgb（36,36,36）；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
调整项目：灵活启动；
}
.侧边栏{
flex:1自动；
高度：100vh；
颜色：rgb（136136136）；
}
Navbar先生{
flex:1自动；
显示器：Flex；
弯曲方向：立柱；
宽度：81%；
高度：100vh；
}
.Navbar_切换>输入[type=“checkbox”]{
显示：无；
}
.搜索栏{
文本对齐：右对齐；
}
.内容{
flex:1自动；
颜色：rgb（136136136）；
}
.链接{
文字装饰：无；
颜色：rgb（136136136）；
}
.名单{
列表样式类型：无；
左：1rem；
}
.侧边栏列表{
显示器：Flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.Sidebar_子列表{
左侧填充：0；
}
.列出项目{
flex:01自动
}
.Sidebar_Toggle>input[type=“checkbox”]{
显示：无；
}

☰


第2项







第3项






第4项







第5项






第6项





第7项








内容

所以我希望我能理解这里发生了什么

在未来，特别是对于CSS相关的问题，视觉效果会让你有很长的路要走

我复制了您的代码并看到了导航：

Item1
Item2
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Sublist Item5
Item3
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Item4
Sublist Item1
Sublist Item2
Sublist item3
Sublist Item4
Sublist Item5
Item5
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Item6
Sublist Item1
Sublist Item2
Sublist Item3
Item7
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Sublist Item5

你不想要这个？相反，你想要

如果是这样，请更新边栏类并添加display:flex，并更新Navbar_控件，使其具有display:flex的样式

因此,

会解决你的问题

使用开发工具检查更改。Navbar\u控件的高度没有弯曲父元素的全高。这些变化将解决这个问题

我希望这对你有帮助。我已经为我的几个网站做了很多flexbox工作。如果使用得当，它们会很棒。如果你想要一个真正的有响应性的布局，你必须做嵌套的display:flex样式，如我发布的代码所示，以解决你的问题

一些关键注意事项：

• 你的类名不应该是驼峰式的，别这样。相反，它们应该是小写的，并用破折号或连字符（-）替换下划线。这是一个HTML/CSS通用标准

• 你使用类太多了。li、label和元素不需要类。这可能会在将来项目变大时导致调试混乱

• 最后但并非最不重要。开发工具是你的朋友。始终检查您的元件。这是一个很好的工具，可以查看CSS哪里出了问题

• 还有一件事：

您需要将子列表嵌套在li元素中。所以

    <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item2</label></li>
        <ul Class="List Sidebar_Sublist">
            <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li> 
        </ul>

项目2

应该是这样的：

  <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle" />Item2</label>
    <ul Class="List Sidebar_Sublist">
      <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li>
    </ul>
  </li>

项目2

一个ul元素应该只包含li元素，否则你会遇到javascript库的问题，等等，工作人员的问题

---

希望这有帮助：）

因此，首先将这些子列表嵌套在相应的li元素中。之后，只需在每个子列表项之间添加填充，就可以获得一些不错的间距。你不需要为每件事都均匀地留出空间或在中间留出空间。是的，通过图像，只需在microsoft paint或其他工具中绘制一些东西。这是一种痛苦，但你现在知道俗话怎么说了。另外，如果这有帮助，请投票表决我的答案。我需要50个代表，这样我就可以开始评论：）没问题。就像我说的，使用开发工具。这很有帮助。几个月后，我很快就适应了CSS样式。不过，StackOverflow说，上下两个月都有投票

  <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle" />Item2</label>
    <ul Class="List Sidebar_Sublist">
      <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li>
    </ul>
  </li>