Material Design Lite - 将汉堡包（抽屉）菜单与 header 栏中的项目对齐

Question

如何将汉堡包（抽屉）菜单与 header 栏中的其他项目水平对齐？因此，将汉堡菜单移动到绘制的红色条上。

密码是：

<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Acme</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="#">Home</a>
                <a class="mdl-navigation__link" href="#">About</a>
                <a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
    </div>
  </header>
    <div id="mydrawer" class="mdl-layout__drawer">
    <span class="mdl-layout-title">Acme</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Products</a>
      <a class="mdl-navigation__link" href="#">Services</a>
      <a class="mdl-navigation__link" href="#">Portfolios</a>
      <a class="mdl-navigation__link" href="#">Achievements</a>
      <a class="mdl-navigation__link" href="#">Blog</a>
    </nav>
  </div>
</body>

Answer 1

答案就在我 html 页面的第一行。将下一行 放在第一个标记之前 之前：

<!doctype html>

Material Design Lite - 将汉堡包（抽屉）菜单与 header 栏中的项目对齐

Material Design Lite - aligning the hamburger (drawer) menu with the items in the header bar

material-design-lite