Question

我正在尝试使用Google MDL文档中的fixed tab example。这是我的代码：

CODE

<!-- Simple header with fixed tabs. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Title</span>
        </div>
        <!-- Tabs -->
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
          <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
          <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout__title">Title</span>
      </div>
      <main class="mdl-layout__content">
        <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-2">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-3">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
      </main>
    </div>

输出

问题是我的抽屉图标位置错误！它与顶部而不是中心对齐。这有什么不对？

Answer 1

我找到了这个answer，它解决了这个问题！您需要将<!DOCTYPE html>添加到源代码，一切都会正常运行。

Google MDL：抽屉图标未居中

1 个答案: