Material Design Lite - 将汉堡（抽屉）菜单与标题栏中的项目对齐答案

【问题标题】：Material Design Lite - aligning the hamburger (drawer) menu with the items in the header barMaterial Design Lite - 将汉堡（抽屉）菜单与标题栏中的项目对齐
【发布时间】：2018-01-25 17:12:16
【问题描述】：

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

代码是：

<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>

【问题讨论】：

你用的是哪一个getmdl.io/components/index.html#menus-section
左下角。以上是全部代码。我简化了这个例子。结果是在所有情况下，汉堡菜单都没有对齐，太高了。

标签： material-design-lite

【解决方案1】：

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

<!doctype html>

【讨论】：