使元素分界线与容器等高

Question

我正在尝试做一个简单的导航栏，但边框的大小与文本的大小相匹配，而不是其容器的高度。我试图 'close' 每个文本在其自己的 'rectangle' 中。我该如何实现？

.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>

使元素分界线与容器等高

Make element dividing lines equal height with container

html

css

navigation

navbar

flexbox