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

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>

文本为垂直，整个框为可点击的

Answer 2

要使整个框可点击，请尝试在li标签中插入整个a元素，如下所示：

<a href="#"> <li>Two Line<br>Nav Item</li> </a>

（假设您的li带有黑色边框）。