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非常有用于对齐任何东西。删除.dropdown-content a上的填充和高度设置，您可以应用/替换以下样式，以便在65px高度内完美匹配和居中文本。 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

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

1 个答案: