Html 在固定高度的Flexbox导航中拉伸项目元素高度

我有一个固定高度的导航，使用flexbox布局模块。它有两个项目（ul元素），其中一个我希望其

li

标签占据导航的所有高度，另一个我希望其

li

标签正常工作。我认为将

display:block

分配给我想要的

li

标记（它们占据导航的所有高度）是可行的，但它的行为类似于

display:inline block

nav{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景色：#000；
高度：65px；
}
导航ul{
列表样式类型：无；
左侧填充：0；
}
李国荣{
浮动：左；
}
导航ul.1 li{
显示：块；
背景色：红色；
}
导航ul.2 li{
显示：内联块；
背景颜色：绿色；
}

#一,
#二,
#三,


#四,
#五,
#六,

只需将

高度：100%

添加到

ul

和

li

中即可

nav{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景色：#000；
高度：65px；
}
导航ul{
列表样式类型：无；
左侧填充：0；
身高：100%；
显示器：flex；
对齐项目：居中；
}
李国荣{
浮动：左；
显示器：flex；
对齐项目：居中；
}
导航ul.1 li{
背景色：红色；
身高：100%；
}
导航ul.2 li{
背景颜色：绿色；
}

#一,
#二,
#三,


#四,
#五,
#六,

只需将

高度：100%

添加到

ul

和

li

中即可

nav{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景色：#000；
高度：65px；
}
导航ul{
列表样式类型：无；
左侧填充：0；
身高：100%；
显示器：flex；
对齐项目：居中；
}
李国荣{
浮动：左；
显示器：flex；
对齐项目：居中；
}
导航ul.1 li{
背景色：红色；
身高：100%；
}
导航ul.2 li{
背景颜色：绿色；
}

#一,
#二,
#三,


#四,
#五,
#六,

简单的答案是使用嵌套的flexbox

移除

对齐项目：居中从
nav
，以便弹性项目可以拉伸（默认行为）到与容器相同的高度

通过添加

ul{margin:0；}

重置边距，以便没有顶部和底部边距

删除所有的

浮动

和

内联块

，flexbox布局中不需要它

应用

显示：flex全部-
nav
、
ul
和
li

最后添加

对齐项：居中

到

li

以垂直居中文本

nav{
显示器：flex；
证明内容：之间的空间；
背景色：黑色；
高度：65px；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
}
李海军{
显示器：flex；
对齐项目：居中；
}
导航ul.1 li{
背景色：红色；
}
导航ul.2 li{
背景颜色：绿色；
}

#一,
#二,
#三,


#四,
#五,
#六,

简单的答案是使用嵌套的flexbox

移除

对齐项目：居中从
nav
，以便弹性项目可以拉伸（默认行为）到与容器相同的高度

通过添加

ul{margin:0；}

重置边距，以便没有顶部和底部边距

删除所有的

浮动

和

内联块

，flexbox布局中不需要它

应用

显示：flex全部-
nav
、
ul
和
li

最后添加

对齐项：居中

到

li

以垂直居中文本

nav{
显示器：flex；
证明内容：之间的空间；
背景色：黑色；
高度：65px；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
}
李海军{
显示器：flex；
对齐项目：居中；
}
导航ul.1 li{
背景色：红色；
}
导航ul.2 li{
背景颜色：绿色；
}

#一,
#二,
#三,


#四,
#五,
#六,

但这样会丢失文本的中心对齐。我只希望item1的

li

标记的背景被拉伸，文本仍然垂直aligned@Keaire这意味着您希望

li

是一个flexbox，而不是

nav

。或者有

ul

的背景。请看我的更新答案，我制作了

ul

和

li

弹性框。它似乎在工作，但我认为有一个更干净的解决方案，而不是使用这么多属性。但这样一来，你就失去了文本的中心对齐。我只希望item1的

li

标记的背景被拉伸，文本仍然垂直aligned@Keaire这意味着您希望

li

是一个flexbox，而不是

nav

。或者有

ul

的背景。请看我更新的答案，我制作了

ul

和

li

弹性盒。它似乎在工作，但我认为有一个更干净的解决方案，而不是使用这么多属性。谢谢你的答案，似乎是合理的解决方案，但是我怎么能做到呢？只是左侧完全伸展为高度，右侧表现为