要让 <li> 元素的高度与 <ul> 元素一致，并垂直填充满，你可以使用以下方法：
.top_nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
align-items: stretch; /* 将 <li> 的高度拉伸为与父元素相同 */
}
.top_nav ul li {
display: flex; /* 嵌套一个 flex 容器，用于实现垂直居中对齐 */
align-items: center; /* 垂直居中对齐 */
}
.top_nav ul li p, .top_nav ul li span {
flex-grow: 1; /* 将文本元素的宽度自动调整以填充剩余空间 */
margin: 0; /* 清除默认的外边距 */
}
通过在 .top_nav ul 上设置 align-items: stretch; ，可以将 <li> 元素的高度拉伸为与父元素 <ul> 相同。然后，在每个 <li> 中创建一个新的 flex 容器，将其中的文本元素（<p> 和 <span>）设置为 flex-grow: 1; ，使其自动调整宽度以填充剩余空间。同时，也需要将这些文本元素的默认外边距清除。
这样设置后，每个 <li> 元素的高度会与父元素 <ul> 一致，并且在垂直方向上填充满。文本内容也会自动居中对齐。
内容由零声教学AI助手提供，问题来源于学员提问
