如何将标签移动到输入字段的左侧？

【问题标题】：How to move label to left of input fields?如何将标签移动到输入字段的左侧？
【发布时间】：2018-06-29 17:27:17
【问题描述】：

我正在处理 PrimeNG 中的输入字段，但不确定如何将标签移动到字段左侧。这是我正在尝试做的图片：

这是我的工作代码：

        <div class="ui-g-12 ui-md-6 ui-lg-4">
            <label>Set Date</label>
            <input id="input" type="text" size="30" pInputText [(ngModel)]="text"> 
        </div>

【问题讨论】：

标签： css angular primeng

【解决方案1】：

您可以使用较小的列 ui-grid-col4 作为标签，使用较大的 ui-grid-col8 作为输入：

     <div class="ui-g ui-fluid">

        <div class="ui-grid-col-4">
          <span>Phone Ext</span>
        </div>
        <div class="ui-grid-col-8">
          <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
        </div>

        <br/><br/><br/>

        <div class="ui-grid-col-4">
          <span>Serial Number</span>
        </div>
        <div class="ui-grid-col-8">
          <p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
        </div>

    </div>

查看工作Plunker

如果您想了解有关网格的更多详细信息，请参阅doc

【讨论】：

很高兴为您提供帮助:)