Polymer.js水平对齐铁型元素

Question

我正在尝试使用Iron-form使用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

将要在同一行中使用的每个<paper-input></paper-input>包装<paper-item></paper-item> ，并添加填充以腾出空间。 即：

<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。

因为我非常习惯引导程序，所以这帮助我使用相同的引导程序类来获得聚合物应用程序中的响应性。

请在下面找到链接。

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