Polymer 1.x：样式化纸张输入宽度和内联

Question

我想将 paper-input 与 paper-menu 内联。但是，我的以下尝试导致 paper-input 样式为 block。我该如何设置它的样式 inline？我还希望 paper-input 的宽度为 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>

Answer 1

您可以使用 iron-flex-layout (https://elements.polymer-project.org/elements/iron-flex-layout) 水平对齐这些元素。

这是一个 JSBin：http://jsbin.com/cozace/edit?html,output

以及代码本身：

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

PS: 不要忘记导入 iron-flex-layout.

Polymer 1.x：样式化纸张输入宽度和内联

Polymer 1.x: Styling paper-input width and inline

polymer

paper-elements

polymer-1.0