css - paper-drawer-panel中抽屉和主要内容的分块显示

对于下面的代码，我希望抽屉和主工具栏水平对齐。而是垂直对齐!请帮我解决这个问题。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link ref="import" href="polymer/polymer.html" />
  <link ref="import" href="paper-drawer-panel/paper-drawer-panel.html" />
  <link rel="import" href="paper-scroll-header-panel/paper-scroll-header-panel.html" />
  <link rel="import" href="paper-toolbar/paper-toolbar.html" />
  <link rel="import" href="paper-icon-button/paper-icon-button.html" />
  <link rel="import" href="iron-icons/iron-icons.html" />
  <link rel="import" href="iron-icon/iron-icon.html" />
  <link rel="import" href="paper-styles/paper-styles.html" />

</head>

<body unresolved>
  <paper-drawer-panel>

    <paper-header-panel drawer>
      <paper-toolbar>
        <span>My drawer</span>
      </paper-toolbar>
    </paper-header-panel>

    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <span>My content</span>
      </paper-toolbar>
    </paper-header-panel>

  </paper-drawer-panel>
</body>

</html>

rendered html with toolbars aligned vertically

最佳答案

问题在于 polymer 和 paper-drawer-panel 使用 ref 而不是 rel。 Polymer 仍在导入，因为它依赖于其他模块，但抽屉面板并未全部导入

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html" />
  <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html" />
  <link rel="import" href="paper-scroll-header-panel/paper-scroll-header-panel.html" />
  <link rel="import" href="paper-toolbar/paper-toolbar.html" />
  <link rel="import" href="paper-icon-button/paper-icon-button.html" />
  <link rel="import" href="iron-icons/iron-icons.html" />
  <link rel="import" href="iron-icon/iron-icon.html" />
  <link rel="import" href="paper-styles/paper-styles.html" />

</head>

<body unresolved>
  <paper-drawer-panel>

    <paper-header-panel drawer>
      <paper-toolbar>
        <span>My drawer</span>
      </paper-toolbar>
    </paper-header-panel>

    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <span>My content</span>
      </paper-toolbar>
    </paper-header-panel>

  </paper-drawer-panel>
</body>

</html>

关于css - paper-drawer-panel中抽屉和主要内容的分块显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41669105/

css - paper-drawer-panel中抽屉和主要内容的分块显示

上一篇：CSS: div 不会向左浮动 (float: left)

下一篇：html - 溢出你不会让滚动