如何让下拉按钮与导航栏垂直对齐？多种方法尝试后仍无效

首先看你的代码结构，问题出在错误的嵌套方式和Bootstrap导航栏默认样式的冲突上——你把整个dropdown组件塞进了<a>标签里，这不仅不符合Bootstrap的组件规范，还会让导航链接的默认padding和按钮的样式互相干扰，导致你试了各种对齐属性都没效果。

下面是具体的修复步骤：

1. 修正HTML结构 #

把<a>标签去掉，直接让navbar-nav的<li>包含dropdown组件。Bootstrap的下拉按钮本身就可以作为导航项存在，不需要嵌套在链接里：

<ul class="nav navbar-nav">
  <li class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Bidang Ilmu</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Fisika</a>
      <a href="#">Matematika</a>
      <a href="#">Kimia</a>
      <a href="#">Biologi</a>
    </div>
  </li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

2. 添加CSS对齐样式 #

接下来调整下拉按钮的样式，让它和导航栏的其他链接垂直对齐。我们可以让按钮继承导航链接的padding，同时去掉按钮默认的边框和背景（保持和导航栏风格统一）：

/* 对齐下拉按钮与导航链接 */
.dropbtn {
  /* 继承导航链接的内边距，确保垂直高度一致 */
  padding: 15px 15px;
  /* 让按钮和文字基线对齐 */
  vertical-align: middle;
  /* 去掉按钮默认样式，匹配导航栏风格 */
  background: transparent;
  border: none;
  color: inherit; /* 继承导航栏文字颜色 */
  font-size: inherit; /* 继承导航栏文字大小 */
  cursor: pointer;
}

/* 可选：鼠标悬停时和导航链接保持一致的样式 */
.dropbtn:hover {
  background-color: rgba(0,0,0,0.1);
}

/* 保持下拉菜单的原有样式 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.show {display:block;}

3. 保留下拉功能的JS #

你的myFunction可以继续使用，用来切换下拉菜单的显示：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 点击外部关闭下拉菜单
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

为什么之前的属性没生效？ #

你之前尝试的vertical-align、padding等属性没起作用，主要是因为：

• <a>标签的默认padding和按钮的padding不匹配，而嵌套结构让样式优先级混乱；
• Bootstrap的navbar-nav的<li>和<a>有默认的垂直对齐规则，外部嵌套的div和button打破了这个规则。

这样修改后，下拉按钮就会和其他导航项完美垂直对齐，同时保持功能正常。

内容的提问来源于stack exchange，提问作者Rizki Laksmana