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

Question

我正在处理 PrimeNG 中的输入字段，而不确定如何将标签移到字段左侧。这是我想要做的事情的图像：

这是我的工作代码：

PLUNKER

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

Answer 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