Html 如何将导航链接设置为与徽标相同的高度？

我正在制作导航菜单，如下图所示

/*
变量
*/
身体{
字体：100%“拉托”，无衬线；
保证金：0；
}
#容器{
宽度：100%；
边缘顶部：47px；
}
/*
导航菜单
*/
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：白色；
位置：固定；
排名：0；
宽度：100%；
/*盒影：0px2px4pRGBA（0,0,0,0.2），06px20px0RGBA（0,0,0,0.19）*/
边框底部：实心3px#21ce99；
z指数：1；
}
李国荣{
浮动：左；
}
海军ulli a{
显示：块；
颜色：#21ce99；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
导航ulli a：悬停{
背景色：#F2F2；
}
/*
布局
*/
部分{
位置：相对位置；
浮动：左；
宽度：60%；
背景色：白色；
}
旁白{
位置：相对位置；
浮动：对；
宽度：40%；
清楚:对,；
}
页脚{
明确：两者皆有；
背景色：#21ce99；
高度：500px；
}
/*
造型
*/
h1{
颜色：rgba（0,0,0,0.87）；
字体：300%“拉托”，无衬线；
填充：30px；
}
p{
颜色：rgba（0,0,0,0.54）；
字体大小：1.3em；
利润率：20px；
}
a#标志{
字体：300%“Wire One”，无衬线；
}
img{
宽度：100%；
最大宽度：600px；
利润率：10px；
}
表，th，td{
边框：实心.13em#16a085；
边界半径：.3em；
字体大小：15px；
填充：10px；
边界塌陷：塌陷；
}
/*
小部件
*/
.btn{
填料：1米1米；
显示：内联块；
边界半径：.38em；
边框：.12em实心#21ce99；
文字装饰：无；
颜色：#21ce99；
利润率：20px；
}
.btn:悬停{
背景色：#21ce99；
颜色：白色；
}

马图塞拉

将您的

ul

显示为

flex

，并使用

对齐项目：居中

和

对齐内容：居中

属性将它们分别垂直和水平放置在方框的中心

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 0;
  width: 100%;
  /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  border-bottom: solid 3px #21ce99;
  z-index: 1;
}

使用

align items:center

时，元素在

flex

容器内垂直居中

---

当您使用

justify content:center

时，您可以在

flex

容器内水平居中放置元素。

将

ul

显示为

flex

，并使用

对齐项目：居中

和

justify content:center

属性将它们放在方框的中心，分别在垂直和水平方向上

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 0;
  width: 100%;
  /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  border-bottom: solid 3px #21ce99;
  z-index: 1;
}

使用

align items:center

时，元素在

flex

容器内垂直居中

---

当您使用

justify content:center

时，您可以将元素水平放置在

flex

容器中。

非常感谢您的帮助。您知道我可以将悬停背景颜色更改扩展到导航框的顶部和底部吗？@soyster是的，您必须删除

显示：块nav ul LIA

类的代码>。我想这就是你指的。非常感谢你的帮助。您知道我可以将悬停背景颜色更改扩展到导航框的顶部和底部吗？@soyster是的，您必须删除

显示：块nav ul LIA

类的代码>。我想这就是你所指的。