html - 我无法调整导航栏 css/html 中下拉菜单的大小

Question

我正在尝试将导航栏中的下拉菜单调整为 65px 高，但无论我输入什么高度它都不会改变，最初我在导航栏中使用了 ul 和 li 标签，但我不得不将其全部更改为 div因为 w3 验证器说它不完全正确所以我不得不将它全部更改为 div，这是我的 html 和源代码:

<div id="nav">
<div class="container">
<a href="404.html">404found</a>
<div class="dropdown">
<button class="dropbtn">Courses</button>
<div class="dropdown-content">
<a href="nonadvancedcourses.html">Non-Advanced</a>
<a href="advancedcourses.html">Advanced</a>
</div>
</div>
<a href="projects.html">Projects</a> 
<a href="contact.html">Contact</a>
</div>
</div>



.dropdown {
float:left;
overflow:hidden;
height:65px;
width:205px;
}

.dropdown .dropbtn {
font-size:16px;    
border:none;
outline:none;
background-color:#FFF;
width:205px;
height:65px;
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100;
color:#444;
background:#FFF;
}

.container a:hover, .dropdown:hover .dropbtn {
background:#E9E9E9;
}

.dropdown-content {
display:none;
position:absolute;
background-color:#f9f9f9;
width:205px;
height:65px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}

.dropdown-content a {
float:left;
font-size:16px;
background:#FFF;
text-align:center;
padding:0;
margin:0;
text-decoration:none;
width:205px;
height:65px;
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100;
color:#444;
line-height:23px;

}

.dropdown-content a:hover {
background-color:#E9E9E9;
}

.dropdown:hover .dropdown-content {
display:block;
}

.container {
overflow:hidden;
background-color:#FFF;
font-family:Arial;
height:65px;
}

.container a {
float:left;
font-size:16px;
background:#FFF;
text-align:center;
padding-top:23px;
text-decoration:none;
width:205px;
height:65px;
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100;
color:#444;
}

Answer 1

这里的问题是内容超出了您设置的高度，这里有几种解决方法。

注意:我已经移动了.container a规则到样式的顶部，因此它们不会覆盖 .dropdown-content a 中的任何内容

让事情变得更小

最简单的方法是调整溢出的大小。在这种情况下，可以简单地应用以下样式:

.dropdown-content a {
  padding-top: 4px;
  height: 28.5px;
}

codepen

但这不是一个很好的方法，并且涉及很多摆弄以正确居中，所以我自己的建议是......

flex 它

我发现 flex 对于对齐任何东西都非常有用。删除 .dropdown-content a 上的填充和高度设置您可以应用/替换以下样式，以在 65 像素高度内完美适配和居中文本。 Read more about flex here.

.dropdown-content {
  flex-direction: column;
}

.dropdown-content a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown:hover .dropdown-content {
  display: flex;
}

这种方式动态多了，.dropdown-content的高度可以根据您的喜好进行调整，一切都会相应地适合。

codepen