html - 如何垂直对齐两行导航项？

Question

我想创建一个导航菜单，其中的元素可以有一行或两行。

它们应该具有相同的高度并且文本应该垂直居中。哦，当然，不仅是文本，整个框都应该是可点击的。

我试过了，但唯一可点击的区域是文本。

   

header .nav {
  position: absolute;
  top: 66px;
}
header .nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
header .nav ul li {
  list-style: none;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 80px;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1em;
  border: 1px solid #fff;
  overflow: hidden;
  background-color: blue;
}
header .nav ul li a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  text-decoration: none;
  color: #1e1e1e;
  padding: 10px 32px;
  display: block;
}
header .nav ul li:hover {
  border: 1px solid #1e1e1e;
}

<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Two Line<br>Nav Item</a></li>
  </ul>
</div>

Answer 1

好的，开始吧，删除整个 CSS 并粘贴它，这将完成您所要求的一切。

CSS

header .nav {
  position: absolute;
  top: 66px;
}
header .nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
header .nav ul li {
  list-style: none;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 80px;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1em;
  border: 1px solid #fff;
  overflow: hidden;
  background-color: dodgerblue;
}
header .nav ul li a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  text-decoration: none;
  color: #1e1e1e;
  padding: 10px 32px;
  display: block;
  text-align: center;
  color:white;
}
header .nav ul li:hover {
  border: 1px solid #1e1e1e;
}

HTML

<header>
    <div class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Two Line<br>Nav Item</a></li>
      </ul>
    </div>
 </header>

文字是竖排的，整个框都是可点击的