html - 如何将下拉按钮与导航按钮垂直对齐

Question

我想将下拉按钮与导航栏垂直对齐。我哪里错了？

我试过垂直对齐、填充、边距、位置等，但没有任何效果。

这是我的完整代码: http://jsfiddle.net/ckv82mtz/

<ul class="nav navbar-nav">
    <li><a><div 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>
    </div></a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>

我希望导航栏和下拉按钮垂直对齐。

Answer 1

有很多方法可以垂直对齐元素你可以使用 line-height css 属性来垂直导航元素我已经为垂直对齐的下拉菜单元素更新了你的 html 和 CSS

检查这个 fiddle 片段

https://jsfiddle.net/hummadhassan/f637rkzp/

<ul class="nav navbar-nav">
  <li><a>Bidang Ilmu</a>
    <div 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>
    </div>
  </li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

.navbar-nav {
  list-style: none;
  background-color: #dddddd;
}

.navbar-nav:after {
  content: ' ';
  display: block;
  clear: both;
}

.navbar-nav li a {
  text-decoration: none;
}

.navbar-nav li {
  float: left;
  padding: 0 10px;
  line-height: 30px;
  position: relative;
}

.navbar-nav li .dropdown {
  display: none;
  position: absolute;
  z-index: 10;
}

.navbar-nav li:hover .dropdown {
  display: block !important;
}

.dropbtn {
  font-size: 14px;
  color: grey;
  border: none;
  cursor: pointer;
  background-color: #f8f8f8;
}

.dropdown {
  position: inherit;
  display: inline-block;
}