ポリマー1.x：スタイリングペーパー入力幅およびインライン

Here is my jsBin。ポリマー1.x：スタイリングペーパー入力幅およびインライン

paper-inputをpaper-menuとインラインで入れたいと思います。しかし、以下の試みでは、paper-inputはblockと書かれています。どのように私はそれをinlineのスタイルにしますか？私はまた、100%の代わりにpaper-inputの幅を25pxにします。これをどのように達成するのですか？

あなたの答えに作業コードの例を記入してください。

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>

出典

2016-09-06 Mowzer

あなたは 'mixin'を間違って使用しています。 'mixins'は他のcssプロパティと同じように使用されます。例えば、名前と値を区切る'コロン（:) 'やプロパティの最後に'セミコロン（;） 'を使用します。 'paper-input { - ペーパー入力コンテナ：{width：25px;}; } ' – a1626

あなたは水平に、これらの要素を整列させるiron-flex-layout（https://elements.polymer-project.org/elements/iron-flex-layout）を使用することができます。 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をインポートすることを忘れないでくださいここで

はJSBinです。

出典

2016-09-07 06:30:41 Hunex

ポリマー1.x：スタイリングペーパー入力幅およびインライン

答えて

関連する問題