0

我正在尝试使用 Polymer 2.0 使用 Iron-form 创建一个表单。我想对齐一行中的两个表单元素和下一行中的下两个元素，依此类推。但我不知道用什么来实现这一点。

请看下面的代码。

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

非常感谢帮助。

4

3 回答 3

0

非常感谢大家的回复。我最终决定使用花岗岩引导组件中的花岗岩引导网格。

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

请找到下面的链接。

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

于 2017-12-01T19:36:04.833 回答
0 
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>
于 2017-12-01T06:48:48.030 回答
0

将您喜欢使用的<paper-item></paper-item>每个包裹在同一行，还添加填充以腾出空间。<paper-input></paper-input>IE：

<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>
于 2017-11-29T13:10:46.190 回答