使元素分割线与容器的高度相等

Question

我试图做一个简单的导航栏，但边框的大小与文本的大小匹配，而不是与容器的高度匹配。我正在尝试将每个文本"关闭"在它自己的"矩形"中。我该如何做到这一点？

.flex-r {
display: flex;
justify-content: space-around;
justify-items: center;
flex-wrap: nowrap;
gap: 1em;
align-items: center;
border: 1px solid black;
min-height: 40px;
}
.nav-item {
border-right: 1px solid black;
width: auto;
}

<div class='flex-r'><a class='nav-item'>Release</a><a class='nav-item'>Statistics</a><a class='nav-item'>Frequent releases</a></div>

Answer 1

将容器设置为min-height: 40px。

将相同的代码添加到项目中。

但这里有一个更好的整体解决方案，可能对你有用：

.flex-r {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;                /* sets the dividing line width */
background-color: black; /* sets the dividing line color */
border: 1px solid black; /* sets the border around the container */
min-height: 40px;
}
.nav-item {
background-color: white; /* restores background color */

/* center the content */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

<div class='flex-r'>
<a class='nav-item'>Release</a>
<a class='nav-item'>Statistics</a>
<a class='nav-item'>Frequent releases</a>
</div>