如何将图标与 paper-input-decorator 内联？

Question

这就是我想要实现的。

尽管使用此代码时。

<paper-input-decorator floatingLabel label="Name *">
    <core-icon icon="account-circle"></core-icon>
    <input type="name">
</paper-input-decorator>

我最终得到了这个，

我注意到在他们网站 (which can be seen here) 的代码中，他们刚刚在左侧给了表单 soem 填充，然后给了图标一个绝对位置。这是进行该设置的唯一方法吗？

谢谢。

Answer 1

将两者都包含在 table 中，并为图标和输入提供 display: table-cell。我会帮你的。然后您可以根据自己的需要设置样式。

Answer 2

您可以使用聚合物布局属性：

<div horizontal layout end>
    <core-icon icon="account-circle" style="margin: 0 10px 10px 0;"></core-icon>
    <paper-input-decorator floatingLabel label="Name *" flex>
        <input type="name">
    </paper-input-decorator>
</div>

http://jsfiddle.net/aswoy1og/

确保导入布局 html，例如：

<link rel="import" href="http://www.polymer-project.org/components/polymer/layout.html">

如何将图标与 paper-input-decorator 内联？

How can I put a icon inline with paper-input-decorator?

html

css

polymer