角2材料形式元素水平對齊

Question

我想感謝您，爲您的時間。我非常感謝你的幫助！

這是我用Angular 2 Material Design創建的表單。我想知道如何對齊和？正如您在下面的快照中看到的那樣，賬單號碼比年份更高。

下面是代碼

<md-card class="bill-form"> 
<md-toolbar color="warn"> 
    <md-card-title>{{bill.Type}}</md-card-title> 
</md-toolbar> 
<md-card-content class="form-content"> 
    <form> 
     <table style="width:100%" cellspacing="0"> 
      <tr> 
      <td> 
       <md-select placeholder="Vendor" [(ngModel)]="bill.VendorShortcut" name="VendorShorcut" 
       (change)="getVendor(bill.VendorShortcut)"> 
        <md-option> 
        </md-option> 
        <md-option *ngFor="let vendor of vendors" [value]="vendor"> 
         {{vendor}} 
        </md-option> 
       </md-select> 
      </td> 
      <td> 
       <md-select placeholder="Type" [(ngModel)]="bill.Type" name="Type" selected="'Bill'"> 
        <md-option [value]="'Bill'"> 
         Bill 
        </md-option> 
        <md-option [value]="'Credit'"> 
         Credit 
        </md-option> 
       </md-select> 

      </td> 
      <td> 
       <md-select placeholder="Month" [(ngModel)]="bill.Month" name="Month" selected="bill.Month"> 
        <md-option *ngFor="let month of months" [value]="month"> 
         {{month}} 
        </md-option> 
       </md-select> 
      </td> 
      <td> 
       <md-select placeholder="Year" [(ngModel)]="bill.Year" name="Year" selected="bill.Year"> 
        <md-option *ngFor="let year of years" [value]="year"> 
         {{year}} 
        </md-option> 
       </md-select> 
      </td> 
      <td> 
       <md-input-container> 
        <input mdInput placeholder="Bill Number" [(ngModel)]="bill.BillNumber" name="BillNumber"> 
       </md-input-container> 
      </td> 
      <td> 
       <md-input-container align="end"> 
        <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total"> 
        <span md-prefix>$&nbsp;</span> 
        <span md-suffix></span> 
       </md-input-container> 
      </td> 
      </tr> 
     </table> 

    </form> 
</md-card-content> 

Answer 1

你可以給輸入容器類，並與CSS移動它們

HTML

 <td> 
      <md-input-container class="align"> 
       <input mdInput placeholder="Bill Number" [(ngModel)]="bill.BillNumber" name="BillNumber"> 
      </md-input-container> 
     </td> 
     <td> 
      <md-input-container class="align" align="end"> 
       <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total"> 
       <span md-prefix>$&nbsp;</span> 
       <span md-suffix></span> 
      </md-input-container> 
     </td> 

CSS

.align { 
    top: 5px; 
} 

Answer 2

您應該使用一個標籤，而不是它的佔位符

<td> 
     <label class="..."> Bill Number </label> 
     <md-input-container> 
      <input mdInput placeholder="Bill Number" [(ngModel)]="bill.BillNumber" name="BillNumber"> 
     </md-input-container> 
    </td> 

使用一些自舉類

的