聚合物1.x:样式纸输入宽度和行内

这是我的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>

您可以使用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 .

相关内容

最新更新

热门标签：