在 Polymer 中设置样式时考虑 width/height of parents

Question

我想在 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% 宽度。由于该容器中的 paper-input 宽度设置为 100%，我认为它考虑了其 parent 的 100%，即文档的 50%。但是，paper-input 占据了整个宽度，不会对容器的 50% 做出反应。如何设置容器的宽度（或高度），以便内部元素（在本例中为 paper-input）将其用作百分比参考？

感谢您的帮助！

Answer 1

width: 50%; 未反映，因为您的 container 已 display: 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>

在 Polymer 中设置样式时考虑 width/height of parents

Consider width/height of parents when styling in Polymer

css

shadow-dom

polymer-2.x