如何调整flexbox中<hr>的高度

Question

我正在制作网站的标题，并决定在导航链接之间使用 hr 而不是 border 属性，因为我不想进入第 n 个子伪元素。导航链接和徽标包装在中心对齐，并且我拉伸了 hr 元素。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "martian", serif;
}

nav {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

hr {
  align-self: stretch;
  color: #fff;
}

<header>
  <nav>
    <a href="" class="nav-link">Classroom</a>
    <hr>
    <a href="" class="nav-link">Manual</a>
    <hr>
    <div class="logo-wrapper">
      <a href="homepage.html" class="logo"><img src="images/tgm_logo.png" class="logo"></a>
      <p class="motto">Engineering Behind Great Inventions</p>
    </div>
    <hr>
    <a href="" class="nav-link">About</a>
    <hr>
    <a href="" class="nav-link">Contact</a>
  </nav>
</header>

我想缩短小时，而不是将其拉长到整个容器，也许是高度的三分之一。我将不胜感激你的帮助。

我尝试为 hr 赋予高度属性而不是拉伸它，但是这样做后它就消失了。

Answer 1

height

对我来说很有用。

您只需绝对调整其大小，如使用

px

、

pt

、

mm

等。

使用

%

会使其高度为 0，因为父元素的高度为 0。