2017-09-22 64 views
1

我想設置聚合物中的容器元素中一些元素的寬度,該元素不像我期望的那樣工作。下面是一些小例子:在Polymer中設計時考慮父母的寬度/高度

<!doctype html> 
 
<html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 

 
<dom-module id="my-container"> 
 
    <template> 
 

 
    <paper-input label="Test"></paper-input> 
 

 
    </template> 
 

 
    <script> 
 
     class MyContainer extends Polymer.Element { 
 

 
      static get is() { 
 
       return 'my-container'; 
 
      } 
 

 
     } 
 

 
     customElements.define(MyContainer.is, MyContainer); 
 
    </script> 
 
</dom-module> 
 

 
<dom-module id="my-element"> 
 

 
    <template> 
 
    <style> 
 
     #pblock { 
 
     width: 50%; 
 
     } 
 
    </style> 
 
    <my-container id="pblock"></my-container> 
 
    </template> 
 

 

 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
      class MyElement extends Polymer.Element { 
 
       static get is() { return 'my-element'; } 
 

 
      } 
 
      customElements.define(MyElement.is, MyElement); 
 
     }); 
 

 
    </script> 
 

 
</dom-module> 
 

 
<my-element></my-element> 
 

 
</body> 
 
</html>

予置容器50%的寬度。由於該容器中的紙張輸入設置爲寬度100%,因此我認爲它認爲其父文件的100%,即文檔的50%。 但是,紙張輸入佔用整個寬度,並且不會對容器的50%做出反應。如何設置容器的寬度(或高度),使內部元素(本例中爲紙張輸入)確實將其用作百分比參考?

感謝您的幫助!

回答

1

width: 50%;沒有反映,因爲你的containerdisplay: inline將其更改爲display: block

如果你希望它是居中對齊給margin-left:auto; margin-right:auto

<!doctype html> 
 
<html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 

 
<dom-module id="my-container"> 
 
    <template> 
 

 
    <paper-input label="Test"></paper-input> 
 

 
    </template> 
 

 
    <script> 
 
     class MyContainer extends Polymer.Element { 
 

 
      static get is() { 
 
       return 'my-container'; 
 
      } 
 

 
     } 
 

 
     customElements.define(MyContainer.is, MyContainer); 
 
    </script> 
 
</dom-module> 
 

 
<dom-module id="my-element"> 
 

 
    <template> 
 
    <style> 
 
     #pblock { 
 
     width: 50%; 
 
     display: block; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     } 
 
    </style> 
 
    <my-container id="pblock"></my-container> 
 
    </template> 
 

 

 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
      class MyElement extends Polymer.Element { 
 
       static get is() { return 'my-element'; } 
 

 
      } 
 
      customElements.define(MyElement.is, MyElement); 
 
     }); 
 

 
    </script> 
 

 
</dom-module> 
 

 
<my-element></my-element> 
 

 
</body> 
 
</html>

相關問題