Polymer.js水平对齐铁形元件

Question

我正在尝试使用铁形式使用聚合物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

包装<paper-item></paper-item>您喜欢在同一行中使用的每个<paper-input></paper-input>，还添加填充以制造空间。即：

<style>
   paper-input {padding-left:10px }
</style>
<div class="card">
            <iron-form id="form3">
                <form action="" method="get">
                   <paper-item>
                      <paper-input float-label label="First Name"></paper-input>
                      <paper-input float-label label="Last Name"></paper-input>
                    </paper-item>
                    <paper-item>
                      <paper-input float-label label="Address"></paper-input>
                      <paper-input float-label label="State"></paper-input>
                    </paper-item>
                    <paper-item>
                      <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-item>
                      <paper-input float-label label="Phone (Office)"></paper-input>
                      <paper-button raised class="indigo">Submit</paper-button>
                </form>
            </iron-form>
</div>

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

非常感谢您的所有响应。我终于决定使用Granite-Bootstrap组件中的Granite-Bootstrap-Grid。

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

请找到下面的链接。

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