抽屜和抽屜面板中的主要內容塊顯示

對於下面的代碼，我期望抽屜和主工具欄水平對齊。而是垂直對齊！請幫我解決這個問題。抽屜和抽屜面板中的主要內容塊顯示

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

來源

2017-01-16 whatwhy

的問題是使用REF代替相對爲polymer和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 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>

來源

2017-01-16 06:14:59 a1626

OMG的感謝！你推薦使用哪個編輯器/ ide來抓取拼寫錯誤的html屬性等等。我目前使用的atom與一些插件安裝。 – whatwhy

您可以使用任何編輯器，如括號，原子或vs代碼。後來兩個有內置的片段，前者可以使用'emmet'作爲片段。 – a1626

抽屜和抽屜面板中的主要內容塊顯示

回答

相關問題