在 Polymer 中进行造型时考虑父母的宽度/高度答案

【问题标题】：Consider width/height of parents when styling in Polymer在 Polymer 中进行造型时考虑父母的宽度/高度
【发布时间】：2018-03-04 00:32:11
【问题描述】：

我想在 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% 没有反应。如何设置容器的宽度（或高度），以便内部元素（在本例中为纸张输入）将其用作百分比参考？

感谢您的帮助！

【问题讨论】：

标签： css shadow-dom polymer-2.x

【解决方案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>

【讨论】：