Question

我正在尝试使用使用铁形式的Polymer 2.0创建表单。我想在一行中对齐两个表单元素，在下一行中对齐下两个元素，依此类推。但我不知道如何使用它来实现这一点。

请参阅以下代码。

<div class="card">
            <iron-form id="form3">
                <form action="" method="get">
                    <paper-input float-label label="First Name"></paper-input>
                    <paper-input float-label label="Last Name"></paper-input>
                    <paper-input float-label label="Address"></paper-input>
                    <paper-input float-label label="State"></paper-input>
                    <paper-input float-label label="Country"></paper-input>
                    <paper-input float-label label="PIN"></paper-input>
                    <paper-input float-label label="Phone (Mobile)"></paper-input>
                    <paper-input float-label label="Phone (Office)"></paper-input>
                    <paper-button raised class="indigo">Submit</paper-button>
                </form>
            </iron-form>
        </div>

非常感谢。

Answer 1

将您想要在同一行使用的每个AUTO_INREMENT换行<paper-item></paper-item>，同时添加填充以腾出空间。即：

<paper-input></paper-input>

Answer 2

Wrap two paper input elements into div and apply style as shown below.

 <style>
      div{
       @apply --layout-horizontal;
       @apply --layout-flex;
     }
   </style>

   <div>
    <paper-input float-label label="First Name"></paper-input>
    <paper-input float-label label="Last Name"></paper-input>
   <div>

Answer 3

非常感谢您的回复。我终于决定使用来自花岗岩自举组件的花岗岩自助网格。

由于我非常习惯于引导，这帮助我使用相同的引导类来获得聚合物应用中的响应特性。

请找到以下链接。

https://www.webcomponents.org/element/LostInBrittany/granite-bootstrap

Polymer.js水平对齐铁形元素

3 个答案: