聚合物1.x：造型纸张输入宽度和内联

Here is my jsBin。我想把一个paper-input内联。但是，我的下面的尝试导致paper-input样式为block。我如何设计它inline？我也希望paper-input的宽度为25px而不是100%。我该如何做到这一点？聚合物1.x：造型纸张输入宽度和内联

请为您的答案提供一个有效的代码示例。

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 {--paper-input-container：{width：25px;}; }' – a1626

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

来源

2016-09-07 06:30:41 Hunex

聚合物1.x：造型纸张输入宽度和内联

回答

相关问题