Css 使用flexbox模型时出现意外高度

我正在尝试制作一个侧菜单，我想使用flexbox模型。但是我有一个问题我还没有解决

在我的菜单中有一些列表元素（如仪表板、组件等）。此列表元素位于

的高度：

你认为为什么会有这么长的高度


。左菜单{
位置：固定；
顶部：0px；
底部：0px；
左：0px；
宽度：220px；
背景色：#eee；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
}
.左菜单.菜单容器>ul{
边际：0px；
填充：0px；
}
.左菜单.菜单容器>ul>li{
填充：2px8px；
}
.左菜单.菜单容器>ul>li>a{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
对齐项目：居中；
位置：相对位置；
填充：6px 8px；
文字装饰：无；
字体大小：.875em；
边界半径：4px；
字体大小：粗体；
颜色：#111；
}
.左菜单.菜单容器>ul>li>a:悬停{
背景：rgba（212,212,212,0.5）；
}







只需将display:block添加到列表中即可

.left-menu .menu-container>ul>li {
padding: 2px 8px;
display: block;
}

看看这个片段


。左菜单{
位置：固定；
顶部：0px；
底部：0px；
左：0px；
宽度：220px；
背景色：#eee；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
}
.左菜单.菜单容器>ul{
边际：0px；
填充：0px；
}
.左菜单.菜单容器>ul>li{
填充：2px8px；
显示：块；
}
.左菜单.菜单容器>ul>li>a{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
对齐项目：居中；
位置：相对位置；
填充：6px 8px；
文字装饰：无；
字体大小：.875em；
边界半径：4px；
字体大小：粗体；
颜色：#111；
}
.左菜单.菜单容器>ul>li>a:悬停{
背景：rgba（212,212,212,0.5）；
}







在这种情况下为什么要使用flexbox？对于
a
，不需要使用flex。。也许你想在
li
上使用flex。。。顺便说一句，如果您想将flex用于，只需将flex添加到li中，问题就会迎刃而解fixed@TemaniAfif，我已在问题中解释过。
a
中还有一些其他元素。所以我使用flex来定位这些元素。但是为什么我必须对
li
使用第二个flex呢？@Gaslan我理解，但是没有逻辑将其他元素放在
a
标记中。也许你需要有子菜单，所以他们会进入<代码>里>代码>不是<代码> A<代码> @ TemaniAfif，左边有菜单图标，右边和中间标签有箭头图标。我想用flexboxYes定位这3个元素，它解决了问题，但我不明白为什么我必须给
li提供
display:block
，
li
我不确定这个问题，但发生的原因是display:flex属性的标签在display:list项的
标签内。因此，添加块级显示，即display:block无法为子元素的xtra腾出空间，因为它会用您给子元素的父元素来阻止区域。因此，am将display:block添加到列表中，该列表是的父级，并且
已经具有display:block的默认显示值。