Polymer 1.x：设置纸张输入宽度和内联线的样式_Polymer_Polymer 1.0_Paper Elements

Polymer 1.x：设置纸张输入宽度和内联线的样式

polymer

Polymer 1.x：设置纸张输入宽度和内联线的样式,polymer,polymer-1.0,paper-elements,Polymer,Polymer 1.0,Paper Elements,我想将纸张输入与纸张菜单内联。但是，我下面的尝试会导致纸张输入被设置为块。如何设置它的内联样式？我还希望纸张输入的宽度为25px，而不是100%。我如何做到这一点请提供一个工作代码示例和您的答案 http://jsbin.com/mufuzodife/1/edit?html，输出 <!doctype html> <head> <meta charset="utf-8"> <base href="https://polygit.org/compo

我想将

纸张输入

与

纸张菜单

内联。但是，我下面的尝试会导致

纸张输入

被设置为

块

。如何设置它的内联样式？我还希望

纸张输入的宽度为25px
，而不是100%
。我如何做到这一点
请提供一个工作代码示例和您的答案
http://jsbin.com/mufuzodife/1/edit?html，输出
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import"> 
</head>
<body>

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

<template>
  <style>
    .inline, paper-item, paper-input {
      display: inline;
    }
    paper-input, --paper-input-container {
      width: 25px;
    }
  </style>

  <div class="inline">
    <paper-menu class="inline">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
    <paper-input label="text input"></paper-input>
  </div>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>


.内联，纸张项目，纸张输入{
显示：内联；
}
纸张输入，--纸张输入容器{
宽度：25px；
}
项目1
项目2
（功能（）{
聚合物({
是：“x元素”，
属性：{}，
});
})();
您可以使用iron flex layout
（）水平对齐这些元素
这是一个JSBin：
代码本身：
<dom-module id="x-element">

<template>
  <style>

    paper-input {
      width: 25px;
    }

    .inline, paper-item {
      display: inline;
    }

    .horizontal {
      @apply(--layout-horizontal);
    }

  </style>

  <div class="horizontal">
    <paper-menu class="inline">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
    <paper-input label="text input"></paper-input>
  </div>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>


纸张输入{
宽度：25px；
}
.内联，纸质项目{
显示：内联；
}
.水平{
@应用（--水平布局）；
}
项目1
项目2
（功能（）{
聚合物({
是：“x元素”，
属性：{}，
});
})();

注意：不要忘记导入您正在错误使用的mixin
iron flex布局mixin
与任何其他css属性一样，使用冒号（：）
分隔名称和值，并在属性末尾使用分号（；）
例如纸张输入{--纸张输入容器：{宽度：25px；}；}