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

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

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

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

头部导航{ 位置：绝对位置； 顶部：66px； } 标题：导航ul{ 保证金：0； 填充：0； 显示器：flex； } 头球，中卫李{ 列表样式：无； 显示：块； 位置：相对位置； 保证金：0； 填充：0； 宽度：200px； 高度：80px； 字体系列：“Muli”，无衬线； 字体大小：400； 字号：1em； 线高：1米； 边框：1px实心fff； 溢出：隐藏； 背景颜色：蓝色； } 标题：nav ul li a{ 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； 宽度：200px； 文字装饰：无； 颜色：1E； 填充：10px 32px； 显示：块； } 标题。导航ul li：悬停{ 边框：1px实心1E； }

---

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

---

假设是您的li有黑色边框。

好的，现在开始，删除整个CSS并粘贴它，这将满足您的所有要求

CSS

HTML

---

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

您的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;
}

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