使元素分割线与容器等高

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>