Question

Here is my jsBin

我想将paper-input与paper-menu内联。但是，我的以下尝试导致paper-input样式为block。如何设置样式inline？我还希望paper-input的宽度为25px而不是100%。我该如何做到这一点？

请提供您的答案的工作代码示例。

http://jsbin.com/mufuzodife/1/edit?html,output

<!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：造型纸输入宽度和内联

1 个答案: