Html 如何使用CSS拉伸元素的高度？

在我的网站上，我制作了一个导航栏，左边有一张图片。我现在的问题是，文本元素位于导航栏的底部，而不是在导航栏上拉伸。有人知道我如何在不改变填充的情况下解决它吗？ e、 g.通过设置动态填充或类似方式

.navbar{
背景色：#e7e7e7；
}
.导航栏元素{
显示：内联块；
颜色：#202020；
填充：10px；
文字装饰：无；
}
.navbar元素：悬停{
颜色：#000000；
背景色：#D0；
}
.navbar-element.active{
颜色：#f0；
背景色：#006000；
}
.navbar元素。活动：悬停{
颜色：#ffffff；
背景色：#007000；
}

---

我将您的链接包装在一个div中，然后将其设置为内容周围的空格。让我知道这是否适合你

.navbar{
背景色：#e7e7e7；
}
.导航栏元素{
显示：内联块；
颜色：#202020；
填充：10px；
文字装饰：无；
}
.链接{
宽度：100%；
高度：适合的内容；
显示：内联flex；
对齐项目：居中；
证明内容：周围的空间；
}
.navbar元素：悬停{
颜色：#000000；
背景色：#D0；
}
.navbar-element.active{
颜色：#f0；
背景色：#006000；
}
.navbar元素。活动：悬停{
颜色：#ffffff；
背景色：#007000；
}

我可以向您提出以下建议（对于徽标，我添加了一个，并给出了尺寸，但请使用您自己的徽标检查此建议）：

img{
高度：50px；/*添加*/
}
navbar先生{
背景色：#e7e7e7；
显示：flex；/*添加*/
对齐项目：居中；/*添加*/
}
.导航栏元素{
/*显示：内联块*/
颜色：#202020；
填充：10px；
文字装饰：无；
}
.navbar元素：悬停{
颜色：#000000；
背景色：#D0；
}
.navbar-element.active{
颜色：#f0；
背景色：#006000；
}
.navbar元素。活动：悬停{
颜色：#ffffff；
背景色：#007000；
}

---

Flexbox始终是答案（问题出现时除外）

将

display:flex

添加到导航栏可以使东西沿轴的间隔更加合理

向导航栏元素添加

display:flex

，可以占用剩余空间

注意，我在图像中添加了任意大小的URL，因为URL不指向任何地方

.navbar{
背景色：#e7e7e7；
显示器：flex；
}
.logo导航栏{高度：100px；宽度：100px；}
.导航栏元素{
显示器：flex；
颜色：#202020；
填充：10px；
文字装饰：无；
}
.navbar元素：悬停{
颜色：#000000；
背景色：#D0；
}
.navbar-element.active{
颜色：#f0；
背景色：#006000；
}
.navbar元素。活动：悬停{
颜色：#ffffff；
背景色：#007000；
}

---

只需添加

显示：flex在
.navbar{背景色：#e7e7e7；显示：flex；}
。
希望这会给你预期的结果。一定要让我知道。
您是否尝试过将高度设置为100%？是的，我尝试过，结果与您尝试过的相同边际：自动？谢谢，这就是我需要解决的问题！我只需将
align items
更改为
stretch
，并在.navbar元素中添加
display:flex
和
align items:center
。欢迎：）如果您想了解更多关于flexbox的信息，我建议您。这是一个非常好的互动学习网站